import Alert from '@/core/components/elements/Alert/Alert'
import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'
import Link from '@/core/components/elements/Link/Link'
import BasicLayout from '@/core/components/layouts/BasicLayout'
import MobileView from '@/core/components/views/MobileView'
import IndoteknikLogo from '@/images/logo.png'
import Image from 'next/image'
import { useRouter } from 'next/router'
import { useState } from 'react'

export default function ForgotPassword() {
  const router = useRouter()
  const { token } = router.query

  const [isLoading, setIsLoading] = useState(false)
  const [alert, setAlert] = useState()

  const [email, setEmail] = useState(router.query?.email || '')

  const forgotPasswordRequest = () => {}

  return (
    <>
      <MobileView>
        <div className='p-6 pt-10 flex flex-col items-center min-h-screen'>
          <Link href='/'>
            <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={150} height={50} />
          </Link>

          <h1 className='text-2xl mt-4 font-semibold text-center'>
            Lupa Kata Sandi Akun Indoteknik
          </h1>

          {alert && (
            <Alert className='text-center mt-4' type={alert.type}>
              {alert.children}
            </Alert>
          )}

          <form onSubmit={forgotPasswordRequest} className='mt-6 w-full'>
            <input
              type='email'
              id='email'
              className='form-input w-full text-center'
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder='Masukan alamat email'
              autoFocus
            />
            <button
              type='submit'
              disabled={email != ''}
              className='btn-yellow font-semibold mt-4 w-full'
            >
              {isLoading ? 'Loading...' : 'Kirim Permintaan'}
            </button>
          </form>
        </div>

        <SimpleFooter />
      </MobileView>
    </>
  )
}