import { useTranslation } from "react-i18next";
import type { RecentTransaction } from "../../shared/types";

export interface HubTopTransactionsTileProps {
  transactions: RecentTransaction[];
  limit?: number;
}

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

export default function HubTopTransactionsTile({
  transactions,
  limit = 5,
}: HubTopTransactionsTileProps) {
  const { t, i18n } = useTranslation();
  const visible = transactions.slice(0, limit);

  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">
        {t("reports.highlights.topTransactions")}
      </span>
      {visible.length === 0 ? (
        <p className="text-sm text-[var(--muted-foreground)] italic">{t("reports.empty.noData")}</p>
      ) : (
        <ul className="flex flex-col gap-1.5">
          {visible.map((tx) => (
            <li key={tx.id} className="flex items-center gap-2 text-sm">
              <span
                className="w-2 h-2 rounded-full flex-shrink-0"
                style={{ backgroundColor: tx.category_color ?? "#9ca3af" }}
              />
              <span className="text-[var(--muted-foreground)] tabular-nums flex-shrink-0">
                {tx.date}
              </span>
              <span className="truncate flex-1 min-w-0">{tx.description}</span>
              <span
                className="tabular-nums font-medium flex-shrink-0"
                style={{ color: tx.amount >= 0 ? "var(--positive, #10b981)" : "var(--foreground)" }}
              >
                {formatAmount(tx.amount, i18n.language)}
              </span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}