import Tabs from "@/app/component/Tabs";

const listTab = [
  "همه",
  "در انتظار پرداخت",
  "رزرو شده",
  "ویزیت شده",
  "لغو خودکار",
  "تکمیل شده",
];

function Head({ status, setStatus }) {
  const statusMap = {
    0: undefined, // all
    1: "waiting_for_payment",
    2: "reserved",
    3: "visited",
    4: "auto_cancel_unpaid",
    5: "completed",
  };

  const handleChange = (e, value) => {
    setStatus(statusMap[value]);
  };

  const getCurrentIndex = () => {
    const entries = Object.entries(statusMap);
    const found = entries.find(([_, val]) => val === status);
    return found ? parseInt(found[0]) : 0;
  };

  return (
    <div className="flex items-center justify-start mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
      <div className="block w-full">
        <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={getCurrentIndex()}
          handleChange={handleChange}
        />
      </div>
    </div>
  );
}

export default Head;