import React from 'react'
import { hasAbility } from '../../../utils/hasAbility';
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from '../../../enums/abilities';
import { ModalEnum } from '../../../enums/Model';
import useModalHandler from '../../../utils/useModalHandler';
import { FaPlus } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
import TablePage from './TablePage';


import AddSubjectModalForm from "../Model/AddModel";
import EditSubjectModalForm from "../Model/EditModel";
import DeleteSubjectModalForm from "../Model/Delete";


const TableWithHeader = () => {
  const store_subject_ability = hasAbility(
    ABILITIES_ENUM?.SUBJECT,
    ABILITIES_VALUES_ENUM?.STORE,
  );
  const { handel_open_model } = useModalHandler();
  const [t] = useTranslation();

  return (
    <div className="TableWithHeader">
    <header>
      <h4 className="Bold Primary ">{t("models.subject")}</h4>
      {store_subject_ability && (
        <button
          onClick={() => handel_open_model(ModalEnum?.SUBJECT_ADD)}
          className="add_button"
        >
          {t("practical.add")} {t("models.subject")} <FaPlus />
        </button>
      )}
    </header>
    <TablePage />

    <AddSubjectModalForm />
      <EditSubjectModalForm />
      <DeleteSubjectModalForm />
  </div>
  )
}

export default TableWithHeader