import React, { useEffect, useState } from 'react'
import LoginImg from '../../assets/bg/login.svg'
import MainLoader from '../loaders/MainLoader'
import { Link, useNavigate } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
import Label from '../Label'
import TextInput from '../inputs/TextInput'


export default function Signup() {

  const [loading, setLoading] = useState(true)

  const navigate = useNavigate()

  useEffect(()=>{
    const timer = setTimeout(()=>{
        setLoading(false)
    },1000)

    return () => clearTimeout(timer)
  },[])

  return (
    <div className="h-screen bg-white w-full flex justify-center items-center">
        <div className="h-full w-full bg-white grid sm:grid-cols-2 lg:grid-cols-5 xl:grid-cols-8">
            <div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
                <div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
                    <div className='w-full text-left'>
                        <h1 className="mb-2 text-black text-4xl font-semibold">MERMS Panel</h1>
                        <p className='text-black-gray text-base'>Welcome, Please create your account.</p>
                    </div>
                    <form className="w-full text-14 text-left text-black-gray">
                        <div className="w-full flex flex-col gap-4 justify-start items-start">
                            <div className='w-full grid grid-cols-2 gap-8'>
                                <div className="w-full">
                                    <div className="w-full flex flex-col gap-2">
                                        <Label desc='First Name*' />
                                        <TextInput type='text' placeholder='Firstname' />
                                    </div>
                                </div>
                                <div className="w-full">
                                    <div className="w-full flex flex-col gap-2">
                                        <Label desc='Last Name*' />
                                        <TextInput type='text' placeholder='Lastname' />
                                    </div>
                                </div>
                            </div>
                            <div className="w-full">
                                <div className="w-full flex flex-col gap-2">
                                    <Label desc='Email*' />
                                    <TextInput type='text' placeholder='Email' />
                                </div>
                            </div>
                            <div className="w-full">
                                <div className="w-full flex flex-col gap-2">
                                    <Label desc='User Name*' />
                                    <TextInput type='text' placeholder='Username' />
                                </div>
                            </div>
                            <div className="w-full">
                                <div className="w-full flex flex-col gap-2">
                                    <Label desc='Password*' />
                                    <TextInput type='password' placeholder='Password' />
                                </div>
                            </div>
                            <div className="w-full text-left">
                                <div className="flex justify-between items-center">
                                    <div className="flex gap-2">
                                        <input className="form-check-input" type="checkbox" id="gridCheck" />
                                        <label className="font-semibold form-check-label" htmlFor="gridCheck">
                                        I accept terms & policy
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div className="w-full mt-3">
                                <button onClick={()=>{navigate(siteLinks.home)}} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Sign Up</button>
                            </div>
                            <div className="mt-3">
                                <p className='font-medium'>Already have an account ?<Link to={siteLinks.login} className=' hover:text-primary'> Sign In</Link></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
                <div className="w-full">
                    <div className="w-2/3 mx-auto">
                        <img className="w-[80%]" src={LoginImg} alt="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}