Verification 3

"use client"

import { useEffect, useId, useState } from "react"
import { REGEXP_ONLY_DIGITS } from "input-otp"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
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 { CheckCircle2Icon, StarIcon } from 'lucide-react'

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="grid min-h-svh w-full grid-cols-1 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none lg:grid-cols-2 lg:p-2"
    >
      <section className="flex flex-col items-center justify-center">
        <div className="flex max-w-sm 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-b-from-20% mask-b-to-100%" />
            <div className="relative z-10 flex size-14 items-center justify-center rounded-full bg-card ring ring-primary/10 ring-inset">
              <CheckCircle2Icon  aria-hidden="true" className="size-6 text-primary" />
            </div>
          </div>
          <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>
        </div>

        <div className="flex w-full max-w-sm flex-col gap-6">
          <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={5}
                pattern={REGEXP_ONLY_DIGITS}
                containerClassName="w-full"
              >
                <InputOTPGroup className="flex w-full gap-2 *:aspect-square *:h-auto *:min-h-0 *:flex-1 *:rounded-lg *:border-l *:bg-transparent *:text-lg md:*:rounded-xl 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} />
                  <InputOTPSlot index={4} />
                </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>Code expired?</span>
                <Button
                  type="button"
                  variant="link"
                  className="h-auto p-0"
                  onClick={() => setCountdown(60)}
                >
                  Send a new one
                </Button>
              </>
            )}
          </div>
        </div>
      </section>

      <div className="relative flex flex-col justify-end overflow-hidden rounded-4xl bg-muted p-12 max-lg:hidden">
        <div className="pointer-events-none absolute inset-0 bg-linear-to-t from-primary/25 via-primary/10 to-transparent" />
        <div className="relative flex flex-col gap-6">
          <div className="flex gap-0.5">
            {[1, 2, 3, 4, 5].map((rating) => (
              <StarIcon  aria-hidden="true" key={rating} className="size-4 fill-primary text-primary" />
            ))}
          </div>
          <p className="text-lg leading-relaxed">
            &ldquo;Email verification was{" "}
            <span className="font-medium text-primary">frictionless</span>. The
            code arrived instantly and I was in within seconds.&rdquo;
          </p>
          <div className="flex items-center gap-3">
            <Avatar className="size-10">
              <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
              <AvatarFallback>S</AvatarFallback>
            </Avatar>
            <div>
              <p className="text-sm font-semibold">Shadcn</p>
              <p className="text-xs text-muted-foreground">Developer</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}