import { db } from "@/lib/db";
import { NewBrandForm } from "./NewBrandForm";
import { BrandRow } from "./BrandRow";
import { AdminOnlyGate } from "../AdminOnlyGate";

export default async function AdminBrandsPage() {
  const brands = await db.brand.findMany({
    include: { aliases: { orderBy: { alias: "asc" } } },
    orderBy: { name: "asc" },
  });

  return (
    <AdminOnlyGate>
    <div>
      <h1 className="font-heading text-3xl font-semibold text-terracotta">
        Brand Management
      </h1>

      <div className="mt-8">
        <NewBrandForm />
      </div>

      <ul className="mt-8 flex flex-col gap-4">
        {brands.map((brand) => (
          <BrandRow key={brand.id} brand={brand} />
        ))}
      </ul>
    </div>
    </AdminOnlyGate>
  );
}