Add card

import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Separator,
  Switch,
} from "@cooud-ui/ui";

export function PaymentMethodAddBlock() {
  return (
    <section aria-label="Add a card" className="mx-auto w-full max-w-md">
      <Card className="shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Add card</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            Enter your card details to add a new payment method.
          </p>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          <div className="flex flex-col gap-1.5">
            <Label htmlFor="add-card-name">Cardholder name</Label>
            <Input
              id="add-card-name"
              name="cardholder"
              placeholder="Jane Cooper"
              autoComplete="cc-name"
            />
          </div>
          <div className="flex flex-col gap-1.5">
            <Label htmlFor="add-card-number">Card number</Label>
            <Input
              id="add-card-number"
              name="cardnumber"
              inputMode="numeric"
              placeholder="1234 1234 1234 1234"
              autoComplete="cc-number"
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="add-card-expiry">Expiry</Label>
              <Input
                id="add-card-expiry"
                name="exp"
                inputMode="numeric"
                placeholder="MM/YY"
                autoComplete="cc-exp"
              />
            </div>
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="add-card-cvc">CVC</Label>
              <Input
                id="add-card-cvc"
                name="cvc"
                inputMode="numeric"
                placeholder="123"
                autoComplete="cc-csc"
              />
            </div>
          </div>
          <div className="flex items-center justify-between rounded-lg border border-border bg-surface-inset p-3">
            <Label htmlFor="add-card-default" className="font-normal text-fg-secondary">
              Set as default payment method
            </Label>
            <Switch id="add-card-default" aria-label="Set as default payment method" />
          </div>
        </CardContent>
        <Separator />
        <CardFooter className="justify-end gap-3">
          <Button variant="ghost" size="sm">
            Cancel
          </Button>
          <Button variant="gradient" size="sm">
            Add card
          </Button>
        </CardFooter>
      </Card>
    </section>
  );
}