otp-3

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
    Field,
    FieldDescription,
    FieldGroup,
    FieldLabel,
} from "@/components/ui/field"
import {
    InputOTP,
    InputOTPGroup,
    InputOTPSeparator,
    InputOTPSlot,
} from "@/components/ui/input-otp"
import Image from "next/image"

export default function OTPForm({ className, ...props }: React.ComponentProps<"div">) {
    return (
        <section>
            <div className="max-w-3xl mx-auto">
                <div
                    className={cn("flex flex-col gap-6", className)}
                    {...props}
                >
                    <Card className="flex-1 overflow-hidden p-0 h-full">
                        <CardContent className="grid flex-1 p-0 m-0 h-full md:grid-cols-2">
                            <form className="flex flex-col items-center justify-center p-6 md:p-8">
                                <FieldGroup>
                                    <Field className="items-center text-center">
                                        <h1 className="text-2xl font-bold">Enter verification code</h1>
                                        <p className="text-muted-foreground text-sm text-balance">
                                            We sent a 6-digit code to your email
                                        </p>
                                    </Field>
                                    <Field>
                                        <FieldLabel htmlFor="otp" className="sr-only">
                                            Verification code
                                        </FieldLabel>
                                        <InputOTP
                                            maxLength={6}
                                            id="otp"
                                            required
                                            containerClassName="gap-4"
                                        >
                                            <InputOTPGroup>
                                                <InputOTPSlot index={0} />
                                                <InputOTPSlot index={1} />
                                                <InputOTPSlot index={2} />
                                            </InputOTPGroup>
                                            <InputOTPSeparator />
                                            <InputOTPGroup>
                                                <InputOTPSlot index={3} />
                                                <InputOTPSlot index={4} />
                                                <InputOTPSlot index={5} />
                                            </InputOTPGroup>
                                        </InputOTP>
                                        <FieldDescription className="text-center">
                                            Enter the 6-digit code sent to your email.
                                        </FieldDescription>
                                    </Field>
                                    <Field>
                                        <Button type="submit">Verify</Button>
                                        <FieldDescription className="text-center">
                                            Didn&apos;t receive the code? <a href="#">Resend</a>
                                        </FieldDescription>
                                    </Field>
                                </FieldGroup>
                            </form>
                            <div className="bg-muted relative hidden md:flex items-center justify-center p-8">
                                <Image
                                    src="https://tailwind-admin.com/images/login/login-side-image.webp"
                                    alt="login-side-image"
                                    width={450}
                                    height={450}
                                />
                            </div>
                        </CardContent>
                    </Card>
                    <FieldDescription className="text-center">
                        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
                        and <a href="#">Privacy Policy</a>.
                    </FieldDescription>
                </div>
            </div>
        </section>
    )
}