Checkout

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

interface OrderLine {
  id: string;
  name: string;
  detail: string;
  price: string;
}

const orderLines: OrderLine[] = [
  { id: "course", name: "The Creator Playbook", detail: "Lifetime access · 42 lessons", price: "$129.00" },
  { id: "templates", name: "Notion template pack", detail: "Order bump", price: "$24.00" },
];

export function CheckoutBlock() {
  return (
    <section aria-label="Checkout" className="mx-auto grid w-full max-w-4xl gap-6 lg:grid-cols-[1fr_1.1fr]">
      {/* Order summary */}
      <Card className="h-fit gap-0 pb-0 shadow-md lg:order-2">
        <CardHeader>
          <CardTitle className="font-display text-lg">Order summary</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">Cooud Studio · digital products</p>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          {orderLines.map((line) => (
            <div key={line.id} className="flex items-start justify-between gap-4">
              <div className="flex flex-col">
                <span className="text-sm font-medium text-fg">{line.name}</span>
                <span className="text-sm text-fg-tertiary">{line.detail}</span>
              </div>
              <span className="text-sm font-medium text-fg">{line.price}</span>
            </div>
          ))}
        </CardContent>
        <Separator className="my-4" />
        <CardContent className="flex flex-col gap-2">
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Subtotal</span>
            <span className="text-fg">$153.00</span>
          </div>
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span className="flex items-center gap-2">
              Discount
              <Badge variant="success">LAUNCH20</Badge>
            </span>
            <span className="text-success">−$30.60</span>
          </div>
        </CardContent>
        <Separator className="my-4" />
        <CardFooter className="flex-col items-stretch gap-1 pb-6">
          <div className="flex items-baseline justify-between">
            <span className="font-medium text-fg">Total due</span>
            <span className="font-display text-2xl font-semibold text-fg">$122.40</span>
          </div>
          <span className="text-xs text-fg-tertiary">One-time payment · billed in USD</span>
        </CardFooter>
      </Card>

      {/* Payment form */}
      <Card className="shadow-md lg:order-1">
        <CardHeader>
          <CardTitle className="font-display text-lg">Payment details</CardTitle>
          <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
            <Badge variant="secondary">
              <Lock className="size-3" aria-hidden="true" />
              Secure
            </Badge>
          </div>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <Label htmlFor="checkout-email">Email</Label>
            <Input id="checkout-email" type="email" placeholder="you@email.com" autoComplete="email" />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="checkout-card">Card number</Label>
            <div className="relative">
              <Input
                id="checkout-card"
                inputMode="numeric"
                placeholder="1234 1234 1234 1234"
                autoComplete="cc-number"
                className="pr-10"
              />
              <CreditCard
                className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-fg-tertiary"
                aria-hidden="true"
              />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="checkout-expiry">Expiry</Label>
              <Input id="checkout-expiry" placeholder="MM / YY" autoComplete="cc-exp" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="checkout-cvc">CVC</Label>
              <Input id="checkout-cvc" inputMode="numeric" placeholder="123" autoComplete="cc-csc" />
            </div>
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="checkout-name">Name on card</Label>
            <Input id="checkout-name" placeholder="Alex Morgan" autoComplete="cc-name" />
          </div>
        </CardContent>
        <Separator />
        <CardFooter className="flex-col items-stretch gap-3">
          <Button variant="gradient" size="lg" className="w-full">
            Pay $122.40
          </Button>
          <p className="flex items-center justify-center gap-2 text-xs text-fg-tertiary">
            <ShieldCheck className="size-3.5" aria-hidden="true" />
            Encrypted payment · 7-day money-back guarantee
          </p>
        </CardFooter>
      </Card>
    </section>
  );
}