import React, { useEffect, useState } from 'react'
import LoginImg from '../../assets/bg/login.svg'

import BSMainLoader from '../loaders/BSMainLoader'
import { Link, useNavigate } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'

export default function Signup2() {

  const [loading, setLoading] = useState(true)

  const navigate = useNavigate()

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

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

  return (
    <div className="bg-white">

        {loading ? 
        <BSMainLoader />
        :
        <div className="app">
            <div className="app-wrap">
                <div className="app-contant">
                    <div className="bg-white">
                        <div className="container-fluid p-0">
                            <div className="row no-gutters">
                            <div class="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
                                <div class="d-flex align-items-center h-100-vh">
                                    <div class="register p-5">
                                        <h1 class="mb-2">MERMS Panel</h1>
                                        <p>Welcome, Please create your account.</p>
                                        <form action="auth-register.html" class="mt-2 mt-sm-5">
                                            <div class="row">
                                                <div class="col-12 col-sm-6">
                                                    <div class="form-group">
                                                        <label class="control-label">First Name*</label>
                                                        <input type="text" class="form-control" placeholder="First Name" />
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Last Name*</label>
                                                        <input type="text" class="form-control" placeholder="Last Name" />
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="control-label">Email*</label>
                                                        <input type="email" class="form-control" placeholder="Email" />
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="control-label">Username*</label>
                                                        <input type="text" class="form-control" placeholder="Username" />
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="control-label">Password*</label>
                                                        <input type="password" class="form-control" placeholder="Password" />
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="gridCheck" />
                                                        <label class="form-check-label" for="gridCheck">
                                                            I accept terms & policy
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-12 mt-3">
                                                    <button onClick={()=>navigate(siteLinks.dash)} class="btn btn-primary text-uppercase">Sign up</button>
                                                </div>
                                                <div class="col-12  mt-3">
                                                    <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                                <div className="col-sm-6 col-xxl-9 col-lg-7 bg-gradient o-hidden order-1 order-sm-2">
                                    <div className="row align-items-center h-100">
                                        <div className="col-7 mx-auto ">
                                            <img className="img-fluid" src={LoginImg} alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        }
    </div>
  )
}
