import { Button } from "@mui/material"

function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {

    return (
        <li>
            <Button
                className={`
                !py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px
                ${activeBtn === idx ? '!bg-[#F17732] !text-[#FAFAFA]' : '!bg-[#F5F5F5] !text-[#3B3B3B]'}
            `}
                onClick={() => setActiveBtn(idx)}
                variant="contained"
                color="secondary"
            >
                {name}
            </Button>
        </li>
    )
}

export default ItemTitle