import Link from "next/link";
import { db } from "@/lib/db";
import { getSettingNumber } from "@/lib/settings";
import { UploadForm } from "@/components/labels/UploadForm";

export default async function UploadPage({
  searchParams,
}: {
  searchParams: Promise<{ blend?: string }>;
}) {
  const { blend: blendId } = await searchParams;

  const blend = blendId
    ? await db.blend.findUnique({ where: { id: blendId }, include: { brand: true } })
    : null;
  const minSourceDimension = await getSettingNumber("label_min_dimension", 825);

  return (
    <div>
      <h1 className="font-heading text-3xl font-semibold text-terracotta">
        Upload a Label
      </h1>
      <p className="mt-2 text-charcoal/60">
        Share a jar label with the community. Choose an image, then crop it
        into a circle before uploading.
      </p>
      <p className="mt-2 text-sm text-charcoal/60">
        Uploading several at once?{" "}
        <Link href="/upload/batch" className="text-terracotta hover:underline">
          Try batch upload
        </Link>
        .
      </p>

      <div className="mt-8">
        <UploadForm
          initialBrand={blend ? { id: blend.brand.id, name: blend.brand.name, slug: blend.brand.slug } : null}
          initialBlend={blend ? { id: blend.id, name: blend.name, slug: blend.slug } : null}
          minSourceDimension={minSourceDimension}
        />
      </div>
    </div>
  );
}