import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import RadioContent from "./RadioContent";
import { Switch } from "@mui/material";
import { category, expertise } from "./listSelector";
const group1 = ["خانم", "آقا", "هر دو"];
const group2 = ["فوق تخصص", "دکترای تخصصی", "متخصص", "دکتری"];

const label = { inputProps: { "aria-label": "Switch demo" } };

function Content({ data, setData }) {
  const changeData = (value, name) => {
    setData({ ...data, [name]: value });
  };

  return (
    <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
      <AutoCompleteSelect
        updateData={changeData}
        list={category}
        name="expertise"
        label="دسته بندی"
      />
      <div className="mt-[24px]">
        <AutoCompleteSelect
          updateData={changeData}
          list={expertise}
          name="expertise"
          label="تخصص"
        />
      </div>
      <div className="mt-[40px] mb-[32px]">
        <RadioContent
          changeData={(value) => changeData(+value, "gender")}
          value={data.gender}
          text="جنسیت پزشک"
          group={group1}
        />
        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
        <RadioContent
          changeData={(value) => changeData(+value, "degree")}
          value={data.degree}
          text="درجه علمی"
          group={group2}
        />
        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
        <div className="flex items-center justify-start gap-[12px]">
          <p className="text-[#3B3B3B] text-[16px] font-medium">
            فقط پزشکان دارای نوبت
          </p>
          <Switch
            {...label}
            onChange={(event) => changeData(event.target.checked, "turn")}
          />
        </div>
      </div>
    </div>
  );
}

export default Content;