import AdminNav from '@/components/AdminNav';
import { createGalleryCategory } from '../../actions';

export default function NewGalleryCategoryPage() {
  return (
    <div className="mx-auto max-w-md px-6 py-12">
      <AdminNav />
      <h1 className="font-display text-3xl">Add a gallery category</h1>
      <p className="mt-2 text-sm text-muted">
        Show up right away as a filter on the public gallery and in the photo upload form.
      </p>

      <form action={createGalleryCategory} className="mt-8 space-y-6">
        <div>
          <label htmlFor="name" className="tag-label mb-2 block">
            Category name
          </label>
          <input
            id="name"
            name="name"
            required
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
            placeholder="Weddings"
          />
        </div>

        <button type="submit" className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark">
          Add category
        </button>
      </form>
    </div>
  );
}
