import React from "react";
import { ConsolidatedData } from "@/hooks/useConsolidatedHoldingsReport";
import { formatNumberWithCommas } from "@/lib/consolidated-holdings-utils";

interface AssetClassTableProps {
  data: ConsolidatedData;
  assetClassSummary: Record<string, number>;
}

export const AssetClassTable: React.FC<AssetClassTableProps> = ({ data, assetClassSummary }) => {
  return (
    <div className="max-h-[550px] overflow-y-auto scrollbar-thin scrollbar-thumb-slate-300 scrollbar-track-slate-100 rounded-lg border border-slate-200 text-slate-900">
      <table className="w-full text-sm min-w-[300px]">
        <thead className="sticky top-0 bg-white z-10 border-b-2 border-slate-300">
          <tr>
            <th className="text-left py-2.5 px-4 font-semibold text-slate-700 bg-white">Asset Class</th>
            <th className="text-right py-2.5 px-4 font-semibold text-slate-700 bg-white">Default Currency Value</th>
          </tr>
        </thead>
        <tbody>
          {Object.entries(assetClassSummary).map(([name, value]: [string, any]) => (
            <tr key={name} className="border-b border-slate-100 hover:bg-slate-50 transition-colors">
              <td className="py-2.5 px-4 text-slate-700">{name}</td>
              <td className="text-right py-2.5 px-4 text-slate-900 font-medium">{formatNumberWithCommas(value)}</td>
            </tr>
          ))}
          <tr className="font-bold border-t-2 border-slate-400 bg-slate-50">
            <td className="py-3 px-4 text-[#428B4D]">Total</td>
            <td className="text-right py-3 px-4 text-[#428B4D]">
              {data?.currency_code} {formatNumberWithCommas(data?.total_market_value_without_interest || 0)}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};