import { FC } from 'react';
import { Group } from '../../components';
import { ActionButton } from '../../components/ActionButton';
import { Approval } from '../../types/approval';
import { twx } from '../../utils/twx';

type ApprovalTableProps = {
  approvals: Approval[];
  onSelectApproval: (
    approval: Approval,
    action: 'edit' | 'delete' | 'files',
  ) => void;
  allowDelete: boolean;
};

export const ApprovalTable: FC<ApprovalTableProps> = ({
  approvals,
  onSelectApproval,
  allowDelete = true,
}) => {
  return (
    <>
      <div className="overflow-x-auto">
        <table className="min-w-full w-full border border-gray-300 bg-white">
          <thead>
            <tr className="bg-gray-200 text-gray-700">
              <th className="border-b p-4 text-left">Title</th>
              <th className="border-b p-4 text-left">Department</th>
              <th className="border-b p-4 text-left">Description</th>
              <th className="border-b p-4 text-left">Created At</th>
              <th className="border-b p-4 text-left">Status</th>
              <th className="border-b p-4 text-left">Action</th>
            </tr>
          </thead>
          <tbody>
            {approvals.map((approval) => (
              <tr key={approval.approvalId}>
                <td className="border-b p-4">{approval.title}</td>
                <td className="border-b p-4">{approval.department}</td>
                <td className="border-b p-4">{approval.description}</td>
                <td className="border-b p-4">
                  {new Date(approval.createdAt).toLocaleString()}
                </td>
                <td className="border-b p-4">{approval.status}</td>
                <td className="border-b p-4">
                  <Group className="gap-2">
                    <ActionButton
                      className={twx('text-blue-6')}
                      label="Info"
                      onClick={() => {
                        onSelectApproval(approval, 'edit');
                      }}
                      isVisible
                    />
                    <ActionButton
                      className={twx('text-blue-6')}
                      label="Files"
                      onClick={() => {
                        onSelectApproval(approval, 'files');
                      }}
                      isVisible
                    />
                    <ActionButton
                      className={twx('text-blue-6')}
                      label="Delete"
                      onClick={() => {
                        onSelectApproval(approval, 'delete');
                      }}
                      isVisible={allowDelete}
                    />
                  </Group>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
};
