import { useTranslation } from "react-i18next";
import Sparkline from "./Sparkline";

export interface HubNetBalanceTileProps {
  label: string;
  amount: number;
  series: number[];
}

function formatSigned(amount: number, language: string): string {
  const formatted = new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
    style: "currency",
    currency: "CAD",
    signDisplay: "always",
  }).format(amount);
  return formatted;
}

export default function HubNetBalanceTile({ label, amount, series }: HubNetBalanceTileProps) {
  const { i18n } = useTranslation();
  const positive = amount >= 0;
  const color = positive ? "var(--positive, #10b981)" : "var(--negative, #ef4444)";

  return (
    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4 flex flex-col gap-2">
      <span className="text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wide">
        {label}
      </span>
      <span className="text-2xl font-bold" style={{ color }}>
        {formatSigned(amount, i18n.language)}
      </span>
      <Sparkline data={series} color={color} height={28} />
    </div>
  );
}