import { Button } from "@mui/material";
import List from "./List";
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
import { useState } from "react";
import ScrollToTop from "@/app/component/ScrollToTop";

function WorkingDays({ parent, data, setData }) {
  const [isDisable, setIsDisable] = useState(true);

  return (
    <div className="opacity-page pb-[24px]">
      <ScrollToTop />
      <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] md:text-[16px] text-center md:text-start font-bold">
        لیست روزهای کاری
      </p>
      <List
        data={data}
        parent={parent}
        setData={setData}
        setIsDisable={setIsDisable}
      />
      <Button
        className="!gap-[4px] !w-full md:!w-fit !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
          !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
          !mt-[48px] md:!mt-[44px] lg:!mt-[40px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
        disabled={isDisable}
        variant="contained"
      >
        ثبت اطلاعات
        <div className={isDisable ? "opacity-40" : "opacity-100"}>
          <ArrowLeftWhiteD />
        </div>
      </Button>
    </div>
  );
}

export default WorkingDays;
