import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { StatusBadge } from "@/components/shared/status-badge";
import { formatDateTime } from "@/lib/format";
import { ordersTexts } from "@/lib/i18n/orders";
import type { RefundRow } from "./types";

export function RefundsTable({ rows }: { rows: RefundRow[] }) {
  return (
    <div className="overflow-x-auto">
      <Table className="min-w-[760px]">
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead className="w-[92px]">{ordersTexts.colId}</TableHead>
            <TableHead className="w-[160px]">{ordersTexts.colDate}</TableHead>
            <TableHead className="min-w-[240px]">{ordersTexts.colService}</TableHead>
            <TableHead className="w-[120px] text-right">{ordersTexts.colCharge}</TableHead>
            <TableHead className="w-[130px] text-right">{ordersTexts.colRefunded}</TableHead>
            <TableHead className="w-[130px]">{ordersTexts.colStatus}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id} className="align-top">
              <TableCell className="font-mono text-xs font-medium tabular-nums">
                {row.id}
              </TableCell>
              <TableCell className="text-xs whitespace-nowrap text-muted-foreground">
                {formatDateTime(row.createdAt)}
              </TableCell>
              <TableCell className="text-sm">
                <div className="leading-tight">{row.serviceName}</div>
                <div className="mt-0.5 font-mono text-[11px] text-muted-foreground">
                  {ordersTexts.serviceIdPrefix} {row.serviceId}
                </div>
              </TableCell>
              <TableCell className="text-right font-mono text-xs tabular-nums text-muted-foreground">
                {row.charge}
              </TableCell>
              <TableCell className="text-right font-mono text-xs font-medium tabular-nums">
                {row.refunded ? (
                  <span className="text-emerald-600 dark:text-emerald-400">{row.refunded}</span>
                ) : (
                  <span className="text-muted-foreground">
                    {ordersTexts.refundsNothingRefunded}
                  </span>
                )}
              </TableCell>
              <TableCell>
                <StatusBadge status={row.status} />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

export default RefundsTable;