import { LiabilitiesInfo } from "@/src/types/admin/types";
import DataTable from "../DataTable";
import SectionHeader from "../SectionHeader";

interface LiabilitiesStepProps {
  liabilities: LiabilitiesInfo;
}

export default function LiabilitiesStep({ liabilities }: LiabilitiesStepProps) {
  const safeLiabilities = liabilities || {};
  const monthlyLiabilities = safeLiabilities.monthlyLiabilities || [];

  const mortgageData = [
    { label: "Mortgage Payment", value: safeLiabilities.hasMortgage || "" },
    { label: "Monthly Amount", value: safeLiabilities.monthlyAmount || "" },
    { label: "Balance", value: safeLiabilities.balance || "" },
    { label: "Status", value: safeLiabilities.status || "" },
    { label: "Lender / Mortgagee", value: safeLiabilities.lender || "" },
  ];

  return (
    <div className="p-6 min-h-[260px]">
      <SectionHeader title="Mortgage & Liabilities" />

      <DataTable data={mortgageData} className="mb-4" />

      {monthlyLiabilities.length > 0 && (
        <>
          <p className="text-[10px] font-bold uppercase text-red-500 tracking-widest mb-2">
            Monthly Liabilities
          </p>

          <div className="overflow-hidden border border-gray-200 rounded-xl bg-white">
            <table className="w-full text-sm">
              <tbody>
                {monthlyLiabilities.map((liability, idx) => (
                  <tr key={idx} className="border-b last:border-b-0">
                    <td className="bg-gray-50 px-4 py-3 font-medium text-gray-700 w-1/3">
                      {liability.payee || liability.type || ""}
                    </td>
                    <td className="px-4 py-3 text-gray-900">{liability.amount || ""}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  );
}