import FieldLabel from "@/components/contactUs/FieldLabel";
import Field from "@/app/component/fields/Field";
import AutoSelector from "@/app/component/element/AutoSelector";

const listIntensity = [
  { label: "شدید" },
  { label: "متوسط" },
  { label: "خفیف" },
];

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

  return (
    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
      <FieldLabel title="ماده آلرژی‌زا">
        <Field
          title=""
          type="text"
          name="substance"
          isPlaceHolder={true}
          value={data?.substance}
          handleChange={handleChange}
        />
      </FieldLabel>
      <FieldLabel title="واکنش">
        <Field
          title=""
          type="text"
          name="reaction"
          isPlaceHolder={true}
          value={data?.reaction}
          handleChange={handleChange}
        />
      </FieldLabel>
      <FieldLabel title="ماده آلرژی‌زا">
        <AutoSelector
          label="شدت"
          name="severity"
          list={listIntensity}
          value={data?.severity}
          updateData={handleChange}
        />
      </FieldLabel>
    </div>
  );
}

export default Content;