import React from "react";
import type { RecentIncident } from "../DashboardTypes";
import { CustomTable, CustomStatus } from "../../../components/custom";
import type { Column } from "../../../components/custom/CustomTable";

interface RecentIncidentsTableProps {
  incidents: RecentIncident[];
}

export const RecentIncidentsTable: React.FC<RecentIncidentsTableProps> = ({ incidents }) => {
  const columns: Column<RecentIncident>[] = [
    {
      header: "Recovery ID",
      accessor: (row) => (
        <span className="text-[13px] font-bold text-gray-900 font-mono">
          {row.recoveryId}
        </span>
      ),
    },
    {
      header: "Passenger / PNR",
      accessor: (row) => (
        <span className="text-[13px] font-bold text-gray-900">
          {row.passengerName}
        </span>
      ),
    },
    {
      header: "Flight",
      accessor: (row) => (
        <span className="text-[13px] font-bold text-gray-900">
          {row.flightNumber}
        </span>
      ),
    },
    {
      header: "Category",
      accessor: (row) => (
        <span className="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-semibold bg-[#EFEFEF] text-gray-600">
          {row.category}
        </span>
      ),
    },
    {
      header: "Status",
      accessor: (row) => <CustomStatus status={row.status} />,
    },
    {
      header: "Value",
      accessor: (row) => (
        <span className="text-[13px] font-bold text-gray-900">
          {row.value}
        </span>
      ),
    },
  ];

  return (
    <div className="bg-white rounded-[16px] border border-gray-100 p-6 shadow-[0_2px_4px_rgba(0,0,0,0.02)] flex flex-col gap-5">
      {/* Table Header Section */}
      <div>
        <h2 className="text-[17px] font-bold text-gray-900 leading-snug">
          Recent Recovery Incidents
        </h2>
        <p className="text-[12px] text-gray-400 font-normal mt-0.5">
          Real-time assessment log of refund and compensation cases.
        </p>
      </div>

      {/* Custom Table Component */}
      <CustomTable<RecentIncident>
        columns={columns}
        data={incidents}
        itemName="incidents"
        totalItems={incidents.length}
        startIndex={incidents.length > 0 ? 1 : 0}
        endIndex={incidents.length}
        totalPages={1}
        currentPage={1}
      />
    </div>
  );
};

export default RecentIncidentsTable;