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;