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

export default function NewCategoryPage() {
  return (
    <div className="mx-auto max-w-md px-6 py-12">
      <AdminNav />
      <h1 className="font-display text-3xl">Add a category</h1>
      <p className="mt-2 text-sm text-muted">
        New categories show up right away in the product form, the shop filters, and the main nav.
      </p>

      <form action={createCategory} 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="Tote bags"
          />
        </div>

        <div>
          <label className="tag-label mb-2 block">Show as a filter on</label>
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                name="showOnPersonalised"
                value="1"
                defaultChecked
                className="h-4 w-4 accent-clay"
              />
              Personalised catalog (/made-to-order)
            </label>
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                name="showOnProducts"
                value="1"
                defaultChecked
                className="h-4 w-4 accent-clay"
              />
              Products catalog (/products)
            </label>
          </div>
        </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>
  );
}
