Verification 4

"use client"

import { useEffect, useId, useState } 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 {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"

export function Verification() {
  const id = useId()
  const [countdown, setCountdown] = useState(0)

  useEffect(() => {
    if (countdown <= 0) return
    const timer = setTimeout(() => setCountdown((seconds) => seconds - 1), 1000)
    return () => clearTimeout(timer)
  }, [countdown])

  return (
    <main
      aria-label="Verification"
      className="flex w-full max-w-sm flex-col items-center gap-4 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <FancyButton
        size="icon-lg"
        aria-label="Home"
        role="link"
        className="size-14 rounded-xl"
        render={<Link href="/" />}
      >
        <Icons.Logo aria-hidden="true" className="size-10" />
      </FancyButton>

      <div className="flex w-full flex-col gap-6 rounded-4xl bg-card p-6 shadow-elevated-lg">
        <div className="text-center">
          <h1 className="text-xl font-semibold tracking-tight text-balance sm:text-2xl">
            Enter verification code
          </h1>
          <p className="text-base text-muted-foreground">
            We&apos;ve sent a code to{" "}
            <span className="font-medium text-foreground">
              contact@diarmuradi.com
            </span>
          </p>
        </div>

        <FieldGroup className="gap-3">
          <Field className="gap-1">
            <FieldLabel htmlFor={`${id}-code`} className="sr-only">
              Verification 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">
            Verify
          </FancyButton>
        </FieldGroup>

        <div className="flex flex-wrap items-center justify-center gap-x-1 gap-y-0.5 text-sm text-muted-foreground">
          {countdown > 0 ? (
            <span>Resend code in {countdown}s</span>
          ) : (
            <>
              <span>Nothing in your inbox?</span>
              <Button
                type="button"
                variant="link"
                className="h-auto p-0"
                onClick={() => setCountdown(60)}
              >
                Resend code
              </Button>
            </>
          )}
        </div>
      </div>
    </main>
  )
}