import { Button } from "@cms/ui/button"

type CreateMenuFormProps = {
  action: (formData: FormData) => void | Promise<void>
}

export function CreateMenuForm({ action }: CreateMenuFormProps) {
  return (
    <form action={action} className="mt-4 space-y-3">
      <label className="space-y-1">
        <span className="text-xs text-neutral-600">Name</span>
        <input
          name="name"
          required
          className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
        />
      </label>
      <label className="space-y-1">
        <span className="text-xs text-neutral-600">Slug</span>
        <input
          name="slug"
          required
          className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
        />
      </label>
      <label className="space-y-1">
        <span className="text-xs text-neutral-600">Location</span>
        <input
          name="location"
          defaultValue="primary"
          className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
        />
      </label>
      <label className="inline-flex items-center gap-2 text-sm text-neutral-700">
        <input name="isVisible" type="checkbox" value="true" defaultChecked className="size-4" />
        Visible
      </label>
      <Button type="submit">Create menu</Button>
    </form>
  )
}