'use client'
import type {FunctionComponent} from 'react'
import SubmitButtonWithLoading from '@/components/custom/submitButtonWithLoading'
import {createTagAction} from '@/serverFunctions/tags'
import {useZodValidatedForm} from '@/lib/useZodValidatedForm'
import {createTagSchema} from '@/schemas/tagSchemas'
import Form from '@/components/custom/form'
import FormInput from '@/components/custom/formInput'

const TagForm: FunctionComponent = () => {
  const [form, createTag] = useZodValidatedForm(createTagSchema, createTagAction)

  return (
    <Form hookForm={form} action={createTag}>
      <div className="grid grid-cols-2 items-center gap-4">
        <FormInput name="name" label="Title" placeholder="Word" />
        <div className="col-span-1 -mt-2">
          <SubmitButtonWithLoading text="Create tag" loadingText="Creating tag..." />
        </div>
      </div>
    </Form>
  )
}

export default TagForm
