Multi-step

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Checkbox,
  Input,
  Label,
  Separator,
  Stepper,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperList,
  StepperSeparator,
  StepperTitle,
} from "@cronus-ui/ui";
import { ArrowLeft, ArrowRight, CreditCard, Lock } from "lucide-react";

export function CheckoutMultiStepBlock() {
  return (
    <section aria-label="Multi-step checkout" className="mx-auto w-full max-w-2xl">
      <Card className="shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Secure checkout</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">Order NW-20461 · $332.64 total</p>
          <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" />
              Step 2 of 3
            </Badge>
          </div>
        </CardHeader>
        <CardContent>
          <Stepper value={1}>
            <StepperList>
              <StepperItem step={0}>
                <div className="flex items-center gap-3">
                  <StepperIndicator />
                  <div className="hidden flex-col sm:flex">
                    <StepperTitle>Shipping</StepperTitle>
                    <StepperDescription>Confirmed</StepperDescription>
                  </div>
                </div>
                <StepperSeparator />
              </StepperItem>
              <StepperItem step={1}>
                <div className="flex items-center gap-3">
                  <StepperIndicator />
                  <div className="hidden flex-col sm:flex">
                    <StepperTitle>Payment</StepperTitle>
                    <StepperDescription>In progress</StepperDescription>
                  </div>
                </div>
                <StepperSeparator />
              </StepperItem>
              <StepperItem step={2}>
                <div className="flex items-center gap-3">
                  <StepperIndicator />
                  <div className="hidden flex-col sm:flex">
                    <StepperTitle>Review</StepperTitle>
                    <StepperDescription>Up next</StepperDescription>
                  </div>
                </div>
              </StepperItem>
            </StepperList>
          </Stepper>
        </CardContent>
        <Separator />
        <CardContent className="flex flex-col gap-4">
          <div className="flex items-center justify-between rounded-xl bg-surface-inset px-4 py-3">
            <div className="flex flex-col">
              <span className="text-xs font-medium uppercase tracking-wide text-fg-tertiary">
                Ships to
              </span>
              <span className="text-sm text-fg">Alex Morgan · 2482 Fulton St, San Francisco</span>
            </div>
            <button
              type="button"
              className="text-sm font-medium text-primary-strong underline-offset-4 hover:underline"
            >
              Edit
            </button>
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="multistep-card">Card number</Label>
            <div className="relative">
              <Input
                id="multistep-card"
                inputMode="numeric"
                placeholder="1234 1234 1234 1234"
                autoComplete="cc-number"
                className="pe-10"
              />
              <CreditCard
                className="pointer-events-none absolute end-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="multistep-expiry">Expiry</Label>
              <Input id="multistep-expiry" placeholder="MM / YY" autoComplete="cc-exp" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="multistep-cvc">CVC</Label>
              <Input
                id="multistep-cvc"
                inputMode="numeric"
                placeholder="123"
                autoComplete="cc-csc"
              />
            </div>
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="multistep-name">Name on card</Label>
            <Input id="multistep-name" placeholder="Alex Morgan" autoComplete="cc-name" />
          </div>
          <Label
            htmlFor="multistep-billing"
            className="flex items-center gap-2 font-normal text-fg-secondary"
          >
            <Checkbox id="multistep-billing" defaultChecked />
            Billing address matches shipping
          </Label>
        </CardContent>
        <Separator />
        <CardFooter className="justify-between gap-3">
          <Button variant="outline">
            <ArrowLeft className="size-4" aria-hidden="true" />
            Back
          </Button>
          <Button variant="primary">
            Continue to review
            <ArrowRight className="size-4" aria-hidden="true" />
          </Button>
        </CardFooter>
      </Card>
    </section>
  );
}