import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Header from '../../../components/Header/Header'
import Input from '../../../components/Input/Input'
import SubmitButton from '../../../components/SubmitButton/SubmitButton'

import styles from './Address.module.css'

const Address = () => {
  const [address, setAddress] = useState('')

  const navigate = useNavigate()

  const handleSubmit = () => {
    navigate('/enrollment/photo')
  }

  return (
    <>
      <Header subheading="Enrollment" />
      <form onSubmit={() => handleSubmit()} className={styles.address}>
        <div className={styles.address__container}>
          <Input
            id="houseNo"
            label="House Number/ Apartment"
            value={address}
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            placeholder="Enter your House Number / Apartment"
          />
          <Input
            id="locality"
            label="Area / Locality"
            value={address}
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            placeholder="Enter your Area / Locality"
          />
          <Input id="town" label="Village / Town" value="town" type="text" />
          <Input
            id="postOffice"
            label="Post Office"
            value={address}
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            placeholder="Enter your Village / Town"
          />
        </div>
        <div className={styles.address__container}>
          <Input
            id="street"
            label="Street / Road"
            value={address}
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            placeholder="Enter the Street / Road"
          />
          <Input
            id="landmark"
            label="Landmark"
            value={address}
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            placeholder="Enter the Landmark"
          />
          <Input
            id="district"
            label="District"
            value={address}
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            placeholder="Enter your District"
          />
          <Input
            id="pincode"
            label="Pincode"
            value={address}
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            placeholder="Enter your area Pincode"
          />
        </div>
        <Input
          id="state"
          label="State"
          value={address}
          type="text"
          onChange={(e) => setAddress(e.target.value)}
          placeholder="Enter your State"
        />
        <SubmitButton />
      </form>
    </>
  )
}

export default Address
