import { RegisterFormAction } from '@/actions/auth/AuthActions'
import Link from 'next/link'
import React, { ViewTransition } from 'react'
// import { ViewTransition } from 'react'
export default function Register() {
  return (<ViewTransition enter={'auto'} exit={'auto'} default={'auto'}>

    <div className='bg-black flex flex-col'>
      <div
        className='bg-white/10 h-svh max-w-[100vw] overflow-hidden backdrop-blur-lg flex flex-col border border-white/20  shadow-lg'
      >

        <div className='bg-purple-950 text-white flex justify-evenly p-2 font-bold'>
          <div>Register Your Profile</div>
        </div>
        <form action={RegisterFormAction} className='m-2 flex flex-col grow'>
          <div className='grow'>
            <div className='text-white'>
              <div className='flex'>
                <label className='me-2 w-1/2'>Your name</label>
                <input placeholder='Your name' type='text' name='name' className='grow' />
              </div>
              <small style={{ fontSize: '0.5rem' }} className='text-xs text-justify '>This will be used for your records but aliases are allowed while using chats</small>
            </div>
            <hr />
            <div className='text-white'>
              <div className='flex'>
                <label className='me-2 w-1/2'>Email</label>
                <input placeholder='Email' type='email' name='email' className='grow' />
              </div>
              <small style={{ fontSize: '0.5rem' }} className='text-xs text-justify '>This will be used to login to the system and gain access to restricted groups</small>
            </div>
            <hr />
            <div className='text-white'>
              <div className='flex'>
                <label className='me-2 w-1/2'>Password</label>
                <input placeholder='Password' type='password' name='password' className='grow' />
              </div>
            </div>
            <hr />
          </div>
          <div className='flex w-full justify-between p-2'>
            <Link href={`/`}><button type='button' className='self-end bg-purple-900 p-2 text-white'>Cancel</button></Link>
            <ViewTransition name='register-button' enter={'animate-in'}>
              <button className='self-end bg-purple-900 p-2 text-white'>Register</button>
            </ViewTransition>
          </div>
          {/*   
          
        </div>
      */}
        </form>
      </div>
    </div>
  </ViewTransition>
  )
}
