'use client'

import React, { useState } from 'react';
import { z } from 'zod';
import { useForm, UseFormReturn } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

type FormInputs = {
  name: string;
  email: string;
};

const FormSchema = z.object({
  name: z.string().min(3).max(10),
  email: z.string()
    .min(1, 'Email is required')
    .email('Invalid email format')
    .refine((email) => email.endsWith('@example.com'), {
      message: 'Only example.com email addresses are allowed',
    }),
});

const AutoForm = () => {
  const [formValues, setFormValues] = React.useState<FormInputs>({
    name: '',
    email: '',
  });

  const useFormReturn: UseFormReturn<FormInputs, any, undefined> = useForm({
    resolver: zodResolver(FormSchema),
    values: formValues,
    mode: 'onChange',
  });
  
  return (
    <div className="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700">
      <h2 className="text-2xl font-bold mb-6">Registration Form</h2>
      <form onSubmit={useFormReturn.handleSubmit(console.log)} className="space-y-4">
        <div>
          <label htmlFor="name" className="block text-sm font-medium mb-1">Name</label>
          <input {...register('name')} id="name" className="w-full p-2 bg-gray-700 rounded border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
          <p className={`mt-1 text-red-500 text-sm h-5 ${formState.errors.name ? 'visible' : 'invisible'}`}>{formState?.errors?.name?.message?.toString()}</p>
        </div>
        <div>
          <label htmlFor="email" className="block text-sm font-medium mb-1">Email</label>
          <input {...register('email')} id="email" className="w-full p-2 bg-gray-700 rounded border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
          <p className={`mt-1 text-red-500 text-sm h-5 ${formState.errors.email ? 'visible' : 'invisible'}`}>{formState.errors.email?.message?.toString()}</p>
        </div>
      </form>
    </div>
  );
};