Payouts

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@cooud-ui/ui";
import { Wallet } from "lucide-react";

interface Payout {
  id: string;
  date: string;
  method: string;
  amount: string;
  status: "Paid" | "In transit" | "Pending";
}

const payouts: Payout[] = [
  { id: "PO-3041", date: "Jun 18, 2026", method: "Bank ···4421", amount: "$4,820.00", status: "Paid" },
  { id: "PO-3018", date: "Jun 11, 2026", method: "Bank ···4421", amount: "$3,140.00", status: "Paid" },
  { id: "PO-2994", date: "Jun 04, 2026", method: "Bank ···4421", amount: "$5,260.00", status: "In transit" },
  { id: "PO-2971", date: "May 28, 2026", method: "Bank ···4421", amount: "$2,980.00", status: "Pending" },
];

function payoutStatusVariant(status: Payout["status"]) {
  if (status === "Paid") return "success" as const;
  if (status === "In transit") return "info" as const;
  return "warning" as const;
}

export function PayoutsBlock() {
  return (
    <section aria-label="Payouts" className="mx-auto flex w-full max-w-4xl flex-col gap-6">
      {/* Balance summary */}
      <div className="grid gap-4 sm:grid-cols-3">
        <Card className="gap-0 shadow-md sm:col-span-2">
          <CardHeader>
            <CardTitle className="font-display text-sm font-medium text-fg-secondary">
              Available balance
            </CardTitle>
          </CardHeader>
          <CardContent className="flex flex-wrap items-end justify-between gap-4">
            <div className="flex items-baseline gap-1">
              <span className="font-display text-4xl font-semibold text-fg">$8,240</span>
              <span className="text-sm text-fg-tertiary">.50 USD</span>
            </div>
            <Button variant="gradient">
              <Wallet className="size-4" aria-hidden="true" />
              Withdraw
            </Button>
          </CardContent>
        </Card>
        <Card className="gap-0 shadow-sm">
          <CardHeader>
            <CardTitle className="font-display text-sm font-medium text-fg-secondary">
              Pending clearance
            </CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-1">
            <span className="font-display text-3xl font-semibold text-fg">$2,980</span>
            <span className="text-xs text-fg-tertiary">Clears in 3 days</span>
          </CardContent>
        </Card>
      </div>

      {/* Payout history */}
      <Card className="gap-0 pb-0 shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Payout history</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            Settlements to your connected bank account.
          </p>
        </CardHeader>
        <CardContent className="px-0 pt-2">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="pl-4 sm:pl-6">Payout</TableHead>
                <TableHead>Date</TableHead>
                <TableHead>Destination</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="pr-4 text-right sm:pr-6">Amount</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {payouts.map((payout) => (
                <TableRow key={payout.id}>
                  <TableCell className="pl-4 font-medium text-fg sm:pl-6">{payout.id}</TableCell>
                  <TableCell className="text-fg-secondary">{payout.date}</TableCell>
                  <TableCell className="text-fg-secondary">{payout.method}</TableCell>
                  <TableCell>
                    <Badge variant={payoutStatusVariant(payout.status)}>{payout.status}</Badge>
                  </TableCell>
                  <TableCell className="pr-4 text-right font-medium text-fg sm:pr-6">
                    {payout.amount}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </section>
  );
}