import { useFetcher } from 'react-router'

import { DialogNews } from '~/components/dialog/news'
import { Button } from '~/components/ui/button'
import { useNewsContext } from '~/contexts/news'

export const DialogForgotPassword = () => {
  const { isForgetOpen, setIsForgetOpen } = useNewsContext()
  const fetcher = useFetcher()

  return (
    <DialogNews
      isOpen={isForgetOpen}
      onClose={() => {
        if (fetcher.state === 'idle') {
          setIsForgetOpen(false)
        }
      }}
      description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
    >
      <div className="flex flex-col items-center justify-center">
        <div className="w-full max-w-md">
          <form>
            {/* Input Email / No Telepon */}
            <div className="mb-4">
              <label
                htmlFor="email"
                className="mb-1 block text-gray-700"
              >
                Email/No. Telepon
              </label>
              <input
                type="text"
                placeholder="Contoh: legal@legalgo.id"
                className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
                required
              />
            </div>

            {/* Tombol Masuk */}
            <Button className="mt-5 w-full rounded-md py-2">
              Reset Password
            </Button>
          </form>
        </div>
      </div>
    </DialogNews>
  )
}