import React, { FormEvent } from 'react'

import { CategoryFormProps } from './CategoryForm.types'

import { useForm } from '../../hooks'

import { Button, Field, Grid } from '../../components'

const CategoryForm = ({ onFormSubmit }: CategoryFormProps) => {
  const [form, setForm] = useForm({})

  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault()

    return onFormSubmit()
  }

  return (
    <form onSubmit={handleSubmit}>
      <Grid columns={2}>
        <Field
          label='Name'
          value={form.name}
          type='text'
          onChange={(data: string) => setForm({ name: data })}
        />
        <Field
          label='Description'
          value={form.desc}
          type='text'
          onChange={(data: string) => setForm({ desc: data })}
          className='col-span-full'
        />
        <Button.Container>
          <Button type='submit' variant='action'>
            Submit
          </Button>
        </Button.Container>
      </Grid>
    </form>
  )
}

export default CategoryForm
