import { AssetAllocationItem, PieSlice } from "@/types/performance-summary";
import { formatCurrencyWithPrefix } from "@/lib/common";

const formatCurrency = (value: number) => formatCurrencyWithPrefix(value, "EUR");

interface AssetAllocationTableProps {
  assetAllocation: AssetAllocationItem[];
  pieSlices: PieSlice[];
  totalValue: number;
}

export function AssetAllocationTable({
  assetAllocation,
  pieSlices,
  totalValue,
}: AssetAllocationTableProps) {
  return (
    <div className="mt-8 rounded-lg border border-slate-200 bg-white shadow-sm">
      <div className="border-b border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900">
          Asset Allocation Details
        </h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-600">
                Asset Class
              </th>
              <th className="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-600">
                Value
              </th>
              <th className="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-600">
                Percentage
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-200">
            {assetAllocation.map((asset, index) => (
              <tr key={index} className="hover:bg-slate-50 transition-colors">
                <td className="px-6 py-4">
                  <div className="flex items-center gap-3">
                    <div
                      className="h-3 w-3 rounded-lg"
                      style={{ backgroundColor: pieSlices[index]?.color }}
                    />
                    <span className="text-sm font-medium text-slate-900">
                      {asset.name}
                    </span>
                  </div>
                </td>
                <td className="px-6 py-4 text-right text-sm text-slate-900">
                  {formatCurrency(asset.value)}
                </td>
                <td className="px-6 py-4 text-right text-sm font-medium text-slate-900">
                  {Math.abs(asset.percentage).toFixed(2)}%
                </td>
              </tr>
            ))}
            <tr className="bg-slate-50 font-semibold">
              <td className="px-6 py-4 text-sm text-slate-900">Total</td>
              <td className="px-6 py-4 text-right text-sm text-slate-900">
                {formatCurrency(totalValue)}
              </td>
              <td className="px-6 py-4 text-right text-sm text-slate-900">
                100.00%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}