"use client";

import { useTranslations } from "next-intl";
import { StatusBadge } from "./StatusBadge";
import type { Redemption } from "@/lib/afc";

interface RedemptionHistoryTableProps {
  redemptions: Redemption[];
}

export function RedemptionHistoryTable({ redemptions }: RedemptionHistoryTableProps) {
  const t = useTranslations("afc");

  if (redemptions.length === 0) {
    return (
      <p className="text-center text-gray-500 py-8">{t("no_redemptions")}</p>
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-white/10 text-gray-400">
            <th className="text-left py-3 px-2 font-medium">{t("date")}</th>
            <th className="text-left py-3 px-2 font-medium">{t("prize")}</th>
            <th className="text-right py-3 px-2 font-medium">AFC</th>
            <th className="text-center py-3 px-2 font-medium">{t("status")}</th>
          </tr>
        </thead>
        <tbody>
          {redemptions.map((r) => (
            <tr key={r.id} className="border-b border-white/5 hover:bg-white/[0.02]">
              <td className="py-3 px-2 text-gray-300">
                {new Date(r.created_at).toLocaleDateString()}
              </td>
              <td className="py-3 px-2 text-white">
                {r.prize_detail}
              </td>
              <td className="py-3 px-2 text-right text-red-400 font-medium">
                -{r.amount_afc}
              </td>
              <td className="py-3 px-2 text-center">
                <StatusBadge status={r.status} />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}