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

export default function NewCollectionPage() {
  return (
    <div className="mx-auto max-w-md px-6 py-12">
      <AdminNav />
      <h1 className="font-display text-3xl">Add a collection</h1>
      <p className="mt-2 text-sm text-muted">
        New collections show up right away in the product form and the Occasions/Gifts For menus.
      </p>

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

        <div>
          <label className="tag-label mb-2 block">Type</label>
          <div className="space-y-2">
            <label className="flex items-start gap-2 text-sm">
              <input type="radio" name="group" value="OCCASION" required className="mt-1 h-4 w-4 accent-clay" />
              <span>
                Occasion
                <span className="mt-0.5 block text-xs text-muted">e.g. Christmas, birthdays, holidays</span>
              </span>
            </label>
            <label className="flex items-start gap-2 text-sm">
              <input type="radio" name="group" value="RECIPIENT" required className="mt-1 h-4 w-4 accent-clay" />
              <span>
                Recipient
                <span className="mt-0.5 block text-xs text-muted">e.g. teachers, school leavers</span>
              </span>
            </label>
          </div>
        </div>

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