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

function List({ appo, hour, setHour, value }) {
  const list = appo && appo[value ? "evening" : "morning"];

  if (list && list.length) {
    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]">
        {list.map((item, idx) => (
          <li key={idx}>
            <Button
              onClick={() => setHour(item)}
              disabled={!item.status === "available"}
              className={`
                          !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
                          ${JSON.stringify(item) === JSON.stringify(hour) ? "!bg-[#F79463] " : ""}
                      `}
            >
              <p
                className={`
                          text-[16px] font-semibold text-[#525252]
                          ${item.status === "available" ? "text-[#525252]" : "text-[#D7D7D7]"}
                          ${JSON.stringify(item) === JSON.stringify(hour) ? "!text-[#FAFAFA] " : ""}
                      `}
              >
                {item.time}
              </p>
            </Button>
          </li>
        ))}
      </ul>
    );
  } else {
    return (
      <p className="text-[#525252] text-[14px] md:text-[16px] font-medium py-[56px]">
        در حال حاضر، نوبتی برای ساعت‌های {[value ? "بعد از ظهر" : "صبح"]} موجود
        نمی‌باشد.
      </p>
    );
  }
}

export default List;