'use client'
import React from 'react'
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import Dataservice from '@/config/axios';
import { toast } from '@/components/ui/use-toast';

const RegistrationForm = () => {
    const router = useRouter();

    const [formData, setFormData] = useState({
        name: '',
        email: '',
        password: ''
    });

    const { name, email, password } = formData;

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        try {
            const res = await Dataservice.post('/auth/register', formData);
            console.log(res.data); // Handle response as needed
            toast({
                title: "Account Created",
            })
            router.push('/dashboard'); // Redirect to dashboard or any other page upon successful registration
        } catch (error: any) {
            toast({
                variant: "destructive",
                title: "Error!",
                description: error?.response?.data?.message
            })
            console.error('Registration failed:', error.response.data);
            // Handle error response, display error messages, etc.
        }
    };
    return (
        <form className='ml-auto md:w-4/6 grid gap-4 border-none text-center' onSubmit={handleSubmit}>
            <span>
                <h1 className='leading-normal text-4xl font-semibold'>Sign Up</h1>
                <p>Sign Up to your account - enjoy exclusive feature & many more</p>
            </span>
            <Label htmlFor="name" className='text-left'>Full Name</Label>
            <Input name="name" value={name} onChange={handleChange} placeholder='Enter Your Full Name' />
            <Label htmlFor="email" className='text-left'>Email</Label>
            <Input name="email" value={email} onChange={handleChange} placeholder='Enter Your Email' />
            <Label htmlFor="password" className='text-left'>Password</Label>
            <Input name="password" type="password" value={password} onChange={handleChange} placeholder='Enter Your Password' />
            <Button className='mt-3'>Sign Up</Button>
            <span>Already have an account? <Link href='/sign-in' className="font-semibold">Sign In</Link></span>
        </form>
    )
}

export default RegistrationForm