"use client";

interface CashHoldingSummaryWidgetProps {
  height?: number;
}

const MOCK_HOLDINGS = [
  { currency: "USD", label: "US Dollar",   amount: "—", pct: 45, color: "bg-blue-500" },
  { currency: "EUR", label: "Euro",         amount: "—", pct: 30, color: "bg-emerald-500" },
  { currency: "GBP", label: "British Pound",amount: "—", pct: 15, color: "bg-violet-500" },
  { currency: "CHF", label: "Swiss Franc",  amount: "—", pct: 10, color: "bg-amber-500" },
];

export function CashHoldingSummaryWidget({ height = 280 }: CashHoldingSummaryWidgetProps) {
  return (
    <div
      className="h-full w-full overflow-hidden rounded-xl border border-slate-100 bg-white p-4 flex flex-col gap-3"
      style={{ minHeight: height }}
    >
      {/* Total row */}
      <div className="flex items-center justify-between border-b border-slate-100 pb-3">
        <span className="text-xs font-semibold uppercase tracking-widest text-slate-400">
          Total Cash
        </span>
        <span className="text-lg font-bold text-slate-800">—</span>
      </div>

      {/* Stacked progress bar */}
      <div className="flex h-2 w-full overflow-hidden rounded-full bg-slate-100">
        {MOCK_HOLDINGS.map((h) => (
          <div
            key={h.currency}
            className={`${h.color} transition-all`}
            style={{ width: `${h.pct}%` }}
          />
        ))}
      </div>

      {/* Currency rows */}
      <div className="flex flex-col gap-2 flex-1">
        {MOCK_HOLDINGS.map((h) => (
          <div key={h.currency} className="flex items-center gap-2">
            <div className={`h-2.5 w-2.5 flex-shrink-0 rounded-full ${h.color}`} />
            <div className="flex flex-1 items-center justify-between min-w-0">
              <div className="min-w-0">
                <p className="text-xs font-semibold text-slate-700 truncate">{h.currency}</p>
                <p className="text-[10px] text-slate-400 truncate">{h.label}</p>
              </div>
              <div className="text-right flex-shrink-0 ml-2">
                <p className="text-xs font-semibold text-slate-800">{h.amount}</p>
                <p className="text-[10px] text-slate-400">{h.pct}%</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      <p className="text-[10px] text-slate-400 text-center">
        Live data available via portfolio sync
      </p>
    </div>
  );
}