import CustomTable from "@/app/component/CustomTable";
import Head from "@/components/dashboard/userAccount/components/Head";
import { useState } from "react";
import ItemAllergie from "./ItemAllergie";
import ModalAddAlergie from "./modal";

function Allergies({ data, changeData, updateData, loading }) {
  const allergies = data && data.other && data.other.allergies;
  const tableHead = ["ردیف", "ماده آلرژی‌زا", "واکنش", "شدت", ""];
  const centerTable = [0];
  const [open, setOpen] = useState(false);

  return (
    <div className="opacity-page">
      <Head text="لیست آلرژی ها">
        <ModalAddAlergie
          open={open}
          setOpen={setOpen}
          loading={loading}
          updateData={updateData}
          changeData={changeData}
        />
      </Head>
      {allergies?.length ? (
        <CustomTable
          zeroRadius={true}
          tableHead={tableHead}
          centerTable={centerTable}
        >
          {allergies?.map((row, idx) => (
            <ItemAllergie
              key={idx}
              row={row}
              idx={idx}
              changeData={changeData}
            />
          ))}
        </CustomTable>
      ) : (
        <p className="text-center py-10 text-gray-500">
          هیچ آلرژی‌ای وجود ندارد!
        </p>
      )}
    </div>
  );
}

export default Allergies;
