import Link from "next/link";
import { BatchUploadForm } from "@/components/labels/BatchUploadForm";
import { MAX_BATCH_FILES } from "@/lib/batch-upload";

export default function BatchUploadPage() {
  return (
    <div>
      <h1 className="font-heading text-3xl font-semibold text-terracotta">
        Batch Upload
      </h1>
      <p className="mt-2 text-charcoal/60">
        Upload up to {MAX_BATCH_FILES} labels at once. Name each file{" "}
        <strong>Brand - Blend</strong> (for example,{" "}
        <code>Dunhill - Nightcap.png</code>) and we&apos;ll match it against
        the catalog automatically. Anything new gets flagged for you to
        confirm before it&apos;s added. Each image is automatically cropped
        to a transparent circle (centered on the image) before uploading, so
        make sure your label art is centered. PNG or JPG source images, at
        least 825x825px, under 5MB each.
      </p>
      <p className="mt-2 text-sm text-charcoal/60">
        Uploading one at a time instead?{" "}
        <Link href="/upload" className="text-terracotta hover:underline">
          Use the single upload form
        </Link>
        .
      </p>

      <div className="mt-8">
        <BatchUploadForm />
      </div>
    </div>
  );
}