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

interface SummaryCardsProps {
  data: ConsolidatedData;
}

export const SummaryCards: React.FC<SummaryCardsProps> = ({ data }) => {
  return (
    <div className="mb-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-slate-900">
      <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
        <div className="text-xs font-semibold text-slate-500 uppercase mb-1">
          Total Market Value
        </div>
        <div className="text-2xl font-bold text-slate-900">
          {data.currency_code} {formatNumberWithCommas(data.total_market_value_without_interest)}
        </div>
      </div>

      <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
        <div className="text-xs font-semibold text-slate-500 uppercase mb-1">
          Purchase Value
        </div>
        <div className="text-2xl font-bold text-slate-900">
          {data.currency_code} {formatNumberWithCommas(data.total_purchase_value)}
        </div>
      </div>

      <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
        <div className="text-xs font-semibold text-slate-500 uppercase mb-1">
          Total Interest
        </div>
        <div className="text-2xl font-bold text-slate-900">
          {data.currency_code} {formatNumberWithCommas(data.total_interest)}
        </div>
      </div>
    </div>
  );
};