Two-Factor Code

import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@cooud-ui/ui";
import { ArrowLeft, ShieldCheck } from "lucide-react";

export function OtpBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-sm gap-6 shadow-lg">
        <CardHeader className="flex flex-col items-center gap-3 text-center">
          <span className="inline-flex size-11 items-center justify-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow">
            <ShieldCheck className="size-5" aria-hidden="true" />
          </span>
          <div className="flex flex-col gap-1">
            <CardTitle className="font-display text-xl">Two-factor authentication</CardTitle>
            <p className="text-sm text-fg-secondary">
              Enter the 6-digit code from your authenticator app.
            </p>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-4">
          <div className="flex justify-center">
            <InputOTP maxLength={6}>
              <InputOTPGroup className="gap-2">
                <InputOTPSlot index={0} />
                <InputOTPSlot index={1} />
                <InputOTPSlot index={2} />
                <InputOTPSlot index={3} />
                <InputOTPSlot index={4} />
                <InputOTPSlot index={5} />
              </InputOTPGroup>
            </InputOTP>
          </div>

          <Button variant="gradient" size="lg" className="w-full">
            Verify
          </Button>

          <p className="text-center text-sm text-fg-secondary">
            Didn&apos;t receive a code?{" "}
            <a
              href="#resend"
              className="font-medium text-primary underline-offset-4 hover:underline"
            >
              Resend
            </a>
          </p>
        </CardContent>

        <CardFooter className="justify-center">
          <a
            href="#signin"
            className="inline-flex items-center justify-center gap-1.5 text-sm font-medium text-fg-secondary transition-colors hover:text-fg"
          >
            <ArrowLeft className="size-4" aria-hidden="true" />
            Back to sign in
          </a>
        </CardFooter>
      </Card>
    </div>
  );
}