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

function Hours({ doctor, hour, setHour, value, nameHours }) {
  return (
    <ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
      {doctor[nameHours[value]].map((item, idx) => (
        <li key={idx}>
          <Button
            onClick={() => setHour(idx)}
            disabled={!item.active}
            className={`
                        !w-full !rounded-[8px] !bg-[#EFEFEF] !grid !place-items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
                        ${idx === hour ? "!bg-[#F79463] " : ""}
                    `}
          >
            <p
              className={`
                        text-[16px] font-semibold text-[#525252]
                        ${item.active ? "text-[#525252]" : "text-[#D7D7D7]"}
                        ${idx === hour ? "!text-[#FAFAFA] " : ""}
                    `}
            >
              {item.hour}
            </p>
          </Button>
        </li>
      ))}
    </ul>
  );
}

export default Hours;