import { Button } from "@mui/material";

function ItemTitle({ name, isActive, onSelect }) {
  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] !whitespace-nowrap ${ isActive ? "!bg-[#F17732] !text-[#FAFAFA]" : "!bg-[#F5F5F5] !text-[#3B3B3B]" } `}
        onClick={onSelect}
        variant="contained"
        color="secondary"
      >
        {name}
      </Button>
    </li>
  );
}

export default ItemTitle;