import Tabs from "@/app/component/Tabs";
import { Button } from "@mui/material";

const listTab = ["نوبت های جاری", "نوبت های انجام شده"];

function Head({ isDone, setIsDone }) {
  return (
    <div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
      <div className="block w-full lg:hidden">
        <Tabs
          style={{
            ".MuiTabs-indicator": {
              height: "2px",
              borderRadius: "16px",
              background: "#5559CE",
            },
            "& .MuiButtonBase-root": {
              color: "#7E7E7E",
              fontSize: "14px",
              fontStyle: "normal",
              fontWeight: "700",
            },
            "& .MuiTabs-flexContainer": {
              paddingRight: "15px",
              paddingLeft: "15px",
            },
            "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
              color: "#5559CE !important",
            },
            "& .MuiButtonBase-root.Mui-selected": {
              color: "#5559CE !important",
            },
          }}
          color="#5559CE"
          listTab={listTab}
          value={isDone ? 0 : 1}
          handleChange={(e, value) => setIsDone(!!!value)}
        />
      </div>
      <Button
        className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
          ${
            isDone
              ? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
              : "!text-[#EFEFEF] !border-transparent"
          }`}
        onClick={() => setIsDone(!isDone)}
        variant="contained"
      >
        نوبت های جاری
      </Button>
      <Button
        className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
          ${
            !isDone
              ? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
              : "!text-[#EFEFEF] !border-transparent"
          }`}
        onClick={() => setIsDone(!isDone)}
        variant="contained"
      >
        نوبت های انجام شده
      </Button>
    </div>
  );
}

export default Head;