"use client";

import { city, state } from "./listSelector";
import EditField from "@/app/component/EditField";
import ContentText from "@/app/component/ContentText";
import AddLocationP from "@/components/icons/AddLocationP";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";

function Form({ parent, data, setData }) {
  const changeData = (value, type, name) => {
    setData((prev) => {
      return {
        ...prev,
        [parent]: {
          ...prev[parent],
          [name]: {
            ...prev[parent][name],
            [type]: value,
          },
        },
      };
    });
  };

  return (
    <div className="mt-[24px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
      <ContentText text="استان">
        <AutoCompleteSelect
          updateData={changeData}
          label="انتخاب کنید..."
          name="state"
          list={state}
        />
      </ContentText>
      <ContentText text="شهر">
        <AutoCompleteSelect
          updateData={changeData}
          label="انتخاب کنید..."
          name="city"
          list={city}
        />
      </ContentText>
      <ContentText text="آدرس">
        <EditField
          icon={<AddLocationP />}
          isTransparent={true}
          placeholder="از روی نقشه انتخاب کنید..."
          iconGray={true}
          changeData={changeData}
          data={data?.address}
          name="address"
        />
      </ContentText>
      <ContentText text="شماره موبایل">
        <EditField
          isTransparent={true}
          placeholder="شماره موبایل"
          iconGray={true}
          changeData={changeData}
          data={data?.phone}
          name="phone"
        />
      </ContentText>
      <ContentText text="شماره مطب">
        <EditField
          isTransparent={true}
          placeholder="شماره مطب"
          iconGray={true}
          changeData={changeData}
          data={data?.office_number1}
          name="office_number1"
        />
      </ContentText>
      <ContentText text="شماره مطب">
        <EditField
          isTransparent={true}
          placeholder="شماره مطب"
          iconGray={true}
          changeData={changeData}
          data={data?.office_number2}
          name="office_number2"
        />
      </ContentText>
    </div>
  );
}

export default Form;
