import React from 'react'
import styles from '../style';

const Register = ({isOpen, onClose}) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 bg-gray-700 bg-opacity-50 flex justify-center items-center z-30">
    <div className="bg-white p-12 rounded-lg h-min-content w-min-fit absolute border-4 border-gray-300">
    <button onClick={onClose} className="absolute top-4 right-4 text-black">
        &times;
    </button>
      <h1 className="text-xl font-bold mb-4 text-center">Zarejestruj się na Izaac.pl</h1>

      <form action='#'>
        <div className='grid'>
        <div className='mb-4 pr-4 '>
          <input type="text" name="" id="" placeholder='Twój login' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center `}/>
        </div>
        <div className='mb-4 pr-4'>
          <input type="email" name="" id="" placeholder='E-mail' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center`}/>
        </div>
        <div className='mb-4 pr-4'>
          <input type="password" name="" id="" placeholder='Hasło' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center`}/>
        </div>
        <div className='mb-6 pr-4'>
          <input type="password" name="" id="" placeholder='Powtórz hasło' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center `}/>
        </div>
        <div className='pr-4'>
          <input type="checkbox" name="" id="" placeholder='' className={`border-b-2 px-4 my-3 mx-2 ${styles.paragraph} text-center `}/> 
          <label>Zapoznałem sie z <a href='#' className='hover:text-blue-600 font-bold sm'>regulaminem portalu Izaac.pl</a> i go akceptuję</label>
        </div>
        <div className='mb-6 pr-4'>
          <input type="checkbox" name="" id="" placeholder='' className={`border-b-2 px-4 my-3 mx-2 ${styles.paragraph} text-center `}/> 
          <label>Rejestruję się jako pracodawca</label>
        </div>

        <button type="submit" className="bg-gray-700 text-white px-4 py-2 rounded w-full font-semibold text">
          Z a r e j e s t r u j &nbsp;&nbsp;s i ę
        </button>
        </div>
      </form>

    </div>
  </div>
  )
}

export default Register