import { SummaryStats } from "@/utils/overall-summary-utils";
import { formatNumber } from "@/lib/common";

interface OverallSummaryStatCardsProps {
  stats: SummaryStats;
  loading: boolean;
}

export function OverallSummaryStatCards({
  stats,
  loading,
}: OverallSummaryStatCardsProps) {
  const statCards = [
    {
      label: "Holdings",
      value: stats.holdings.toLocaleString(),
      helper: "Total positions in scope",
    },
    {
      label: "Total Purchase Value (RC)",
      value: formatNumber(stats.totalPurchase),
      helper: "Reported currency",
    },
    {
      label: "Total Market Value (RC)",
      value: formatNumber(stats.totalMarket),
      helper: "Current valuation",
    },
    {
      label: "Unrealised Gain / Loss",
      value: formatNumber(stats.totalGain),
      helper: "Change vs purchase",
      tone: stats.totalGain >= 0 ? "positive" : "negative",
    },
    {
      label: "Average Return",
      value: `${formatNumber(stats.avgReturn, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })}%`,
      helper: "Gain / Purchase",
      tone: stats.avgReturn >= 0 ? "positive" : "negative",
    },
  ];

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
      {statCards.map((stat) => (
        <div
          key={stat.label}
          className="rounded-lg border border-slate-200 bg-white px-5 py-5 shadow-sm"
        >
          <div className="space-y-1.5">
            <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
              {stat.label}
            </p>
            <p
              className={`text-2xl font-semibold ${
                stat.tone === "negative"
                  ? "text-red-500"
                  : stat.tone === "positive"
                  ? "text-emerald-600"
                  : "text-slate-800"
              }`}
            >
              {loading ? "—" : stat.value}
            </p>
            <p className="text-xs text-slate-500">{stat.helper}</p>
          </div>
        </div>
      ))}
    </div>
  );
}