// "use client";


// const FormSchema = z.object({
//   token: z.string().min(6, {
//     message: "Your one-time password must be 6 characters.",
//   }),
// });

// interface InputOTPFormProps {
//   className?: string;
//   [key: string]: any;
// }

// export function VerifyOtpForm({ className, ...props }: InputOTPFormProps) {
//   const searchParams = useSearchParams();
//   const email = searchParams.get("email") || "";

//   const form = useForm<z.infer<typeof FormSchema>>({
//     resolver: zodResolver(FormSchema),
//     defaultValues: {
//       token: "",
//     },
//   });

//   async function onSubmit(data: z.infer<typeof FormSchema>) {
//     try {
//     } catch (error) {
//       toast({
//         variant: "destructive",
//         title: "Error",
//         description: "Failed to verify OTP. Please try again.",
//       });
//     }
//   }

//   return (
//     <div className={cn("flex flex-col gap-6", className)} {...props}>
//       <Card className="bg-[#171717] border-gray-800 text-white border-none">
//         <CardHeader className="text-center">
//           <CardTitle className="text-2xl font-bold">
//             One-Time Password
//           </CardTitle>
//           <CardDescription className="text-gray-400">
//             One time password is a security feature that helps protect your data
//           </CardDescription>
//         </CardHeader>
//         <CardContent>
//           <Form {...form}>
//             <form className="space-y-6">
//               <input type="hidden" name="email" value={email} />
//               <FormField
//                 control={form.control}
//                 name="token"
//                 render={({ field }) => (
//                   <FormItem>
//                     <FormControl>
//                       <InputOTP maxLength={6} {...field}>
//                         <InputOTPGroup className="flex w-full items-center justify-center space-x-2">
//                           {[...Array(6)].map((_, index) => (
//                             <InputOTPSlot
//                               key={index}
//                               index={index}
//                               className="w-12 h-12 text-xl border-2 border-gray-700 bg-[#1C1C1C] text-white rounded-md focus:border-emerald-600 focus:ring-emerald-600"
//                             />
//                           ))}
//                         </InputOTPGroup>
//                       </InputOTP>
//                     </FormControl>
//                     <FormDescription className="flex w-full justify-center items-center text-gray-400">
//                       Please enter the one-time password sent to {email}.
//                     </FormDescription>
//                     <FormMessage className="text-red-400" />
//                   </FormItem>
//                 )}
//               />
//               <div className="flex justify-center">
//                 <SubmitButton
//                   className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
//                   pendingText="Verifying..."
//                   formAction={verifyOtpAction}
//                 >
//                   Submit
//                 </SubmitButton>
//               </div>
//             </form>
//           </Form>
//         </CardContent>
//       </Card>
//       <div className="text-balance text-center text-xs text-gray-400 [&_a]:text-emerald-500 [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-emerald-400">
//         By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
//         and <a href="#">Privacy Policy</a>.
//       </div>
//     </div>
//   );
// }