import DataTable from "../DataTable";
import SectionHeader from "../SectionHeader";

interface Payee {
  payeeName: string;
  amount: string;
}

interface PayeeStepProps {
  payees: Payee[] | null | undefined;
}

export default function PayeeStep({ payees }: PayeeStepProps) {
  // Ensure payees is an array
  const safePayees = Array.isArray(payees) ? payees : [];

  // Transform payees data for DataTable
  const dataTableRows = safePayees.map((payee, index) => ({
    label: `Payee ${index + 1} : ${payee.payeeName || "N/A"}`,
    value: `$${payee.amount || "0"}`,
  }));

  return (
    <div className="p-6 min-h-[260px]">
      <SectionHeader title="Payee & Amount Details" subtitle="Monthly Liabilities"  />

      {safePayees.length > 0 ? (
        <DataTable data={dataTableRows} className="mb-4" />
      ) : (
        <p className="text-gray-500">No payees available.</p>
      )}
    </div>
  );
}