'use client'
import type {FunctionComponent} from 'react'
import {useActionState} from 'react'
import {Label} from '@/components/ui/label'
import {Input} from '@/components/ui/input'
import SubmitButtonWithLoading from '@/components/custom/submitButtonWithLoading'
import {createTagAction} from '@/serverFunctions/tags'

const TagForm: FunctionComponent = () => {
  const [_, createTag] = useActionState(createTagAction, undefined)

  return (
    <form action={createTag}>
      <div className="grid grid-cols-2 items-end gap-4">
        <div className="col-span-1 flex flex-col gap-4">
          <Label htmlFor="name">Title</Label>
          <Input id="name" name="name" type="text" placeholder="Work" />
        </div>
        <div className="col-span-1">
          <SubmitButtonWithLoading text="Create tag" loadingText="Creating tag..." />
        </div>
      </div>
    </form>
  )
}

export default TagForm
