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

function Relatives({ data, changeData, loading, updateData }) {
  const relatives = data && data.other && data.other.relatives;
  const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
  const centerTable = [0];
  const [open, setOpen] = useState(false);

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

export default Relatives;
