Two Factor 2

"use client"

import { useId } from "react"
import Link from "next/link"
import { REGEXP_ONLY_DIGITS } from "input-otp"

import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"
import { ShieldIcon } from 'lucide-react'

export function TwoFactor() {
  const id = useId()

  return (
    <main
      aria-label="Two-factor authentication"
      className="flex w-full max-w-md flex-col gap-6 rounded-4xl bg-card p-6 text-foreground shadow-elevated-lg motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <div className="flex flex-col items-center gap-4">
        <div className="relative flex size-14 items-center justify-center">
          <div className="absolute inset-0 scale-125 rounded-full bg-primary/10 mask-t-from-20% mask-t-to-100%" />
          <div className="relative z-10 flex size-14 items-center justify-center rounded-full bg-card ring ring-primary/10 ring-inset">
            <ShieldIcon  aria-hidden="true" className="size-6 text-primary" />
          </div>
        </div>
        <div className="text-center">
          <h1 className="text-xl font-semibold tracking-tight text-balance">
            Two-factor authentication
          </h1>
          <p className="text-base text-muted-foreground">
            Scan with your authenticator app, then confirm with a code.
          </p>
        </div>
      </div>

      <div className="flex items-start gap-4">
        <div className="size-28 shrink-0 overflow-hidden rounded-xl bg-background p-1.5 shadow-elevated-sm sm:size-32">
          <Icons.QrCode aria-hidden="true" className="size-full" />
        </div>
        <div className="flex min-w-0 flex-1 flex-col gap-2">
          <p className="text-sm leading-snug text-muted-foreground">
            Can&apos;t scan? Enter code manually:
          </p>
          <Input
            readOnly
            aria-label="Authenticator setup key"
            value="WXYZ-1234-QRST-5678"
            className="h-10 bg-transparent font-mono text-xs"
          />
        </div>
      </div>

      <FieldGroup className="gap-3">
        <Field className="gap-1">
          <FieldLabel htmlFor={`${id}-code`} className="sr-only">
            Authentication code
          </FieldLabel>
          <InputOTP
            id={`${id}-code`}
            inputMode="numeric"
            className="bg-transparent"
            maxLength={4}
            pattern={REGEXP_ONLY_DIGITS}
            containerClassName="w-full"
          >
            <InputOTPGroup className="flex w-full gap-2 *:aspect-square *:h-auto *:min-h-0 *:flex-1 *:rounded-xl *:border-l *:bg-transparent *:text-lg md:*:rounded-2xl md:*:text-2xl *:[&_.cn-input-otp-caret-line]:h-[1em] md:*:[&_.cn-input-otp-caret-line]:h-[1.25em]">
              <InputOTPSlot index={0} />
              <InputOTPSlot index={1} />
              <InputOTPSlot index={2} />
              <InputOTPSlot index={3} />
            </InputOTPGroup>
          </InputOTP>
        </Field>

        <FancyButton type="button" size="lg" className="w-full">
          Enable 2FA
        </FancyButton>
      </FieldGroup>

      <div className="flex flex-wrap items-center justify-center gap-x-1 gap-y-0.5 text-sm text-muted-foreground">
        <span>{"Can't scan the code?"}</span>
        <Button
          variant="link"
          className="h-auto p-0"
          nativeButton={false}
          role="link"
          render={<Link href="/recovery-code" />}
        >
          Use a recovery code
        </Button>
      </div>
    </main>
  )
}