'use client'
import {FunctionComponent, useState} from 'react'
import {Label} from '@/components/ui/label'
import {Input} from '@/components/ui/input'
import SubmitButtonWithLoading from '@/components/custom/submitButtonWithLoading'
import useServerAction from '@hooks/useServerAction'
import Actions from '@actions'

const TagForm: FunctionComponent = () => {
  const [name, setName] = useState<string>('')
  const [isPending, createTag] = useServerAction(Actions.createTag)

  return (
    <form
      onSubmit={evt => {
        evt.preventDefault()
        setName('')
        void createTag({name})
      }}>
      <div className="grid grid-cols-2 items-end gap-4">
        <div className="col-span-1">
          <Label htmlFor="name">Title</Label>
          <Input id="name" type="text" value={name} onChange={evt => setName(evt.target.value)} placeholder="Work" />
        </div>
        <div className="col-span-1">
          <SubmitButtonWithLoading loading={isPending} text="Create tag" loadingText="Creating tag..." />
        </div>
      </div>
    </form>
  )
}

export default TagForm
