Select method

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Label,
  RadioGroup,
  RadioGroupItem,
  Separator,
} from "@cooud-ui/ui";
import { CreditCard } from "lucide-react";

interface SavedCard {
  id: string;
  brand: string;
  last4: string;
  expiry: string;
  isDefault?: boolean;
}

const savedCards: SavedCard[] = [
  { id: "card-visa", brand: "Visa", last4: "4242", expiry: "08/27", isDefault: true },
  { id: "card-mc", brand: "Mastercard", last4: "8888", expiry: "11/26" },
];

export function PaymentMethodBlock() {
  return (
    <section aria-label="Payment method" className="mx-auto w-full max-w-md">
      <Card className="shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Payment method</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            Choose how you'd like to be billed.
          </p>
        </CardHeader>
        <CardContent className="flex flex-col gap-3">
          <RadioGroup defaultValue="card-visa" aria-label="Saved payment methods" className="gap-3">
            {savedCards.map(({ id, brand, last4, expiry, isDefault }) => (
              <Label
                key={id}
                htmlFor={id}
                className="flex cursor-pointer items-center gap-3 rounded-lg border border-border bg-surface-inset p-3 has-[:checked]:border-primary"
              >
                <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-surface-overlay text-fg-secondary">
                  <CreditCard className="size-4" aria-hidden="true" />
                </span>
                <span className="flex min-w-0 flex-1 flex-col">
                  <span className="flex items-center gap-2 text-sm font-medium text-fg">
                    {brand} •••• {last4}
                    {isDefault ? <Badge variant="secondary">Default</Badge> : null}
                  </span>
                  <span className="text-sm text-fg-tertiary">Expires {expiry}</span>
                </span>
                <RadioGroupItem value={id} id={id} aria-label={`${brand} ending ${last4}`} />
              </Label>
            ))}
          </RadioGroup>
          <Button variant="outline" className="w-full justify-center">
            + Add payment method
          </Button>
        </CardContent>
        <Separator />
        <CardFooter className="justify-end gap-3">
          <Button variant="ghost" size="sm">
            Cancel
          </Button>
          <Button variant="gradient" size="sm">
            Save
          </Button>
        </CardFooter>
      </Card>
    </section>
  );
}