import { CommissionCard } from "@/components/commissions/CommissionCard";
import { CommissionOrderForm } from "@/components/commissions/CommissionOrderForm";
import prisma from "@/lib/prisma";

export default async function CommissionsPage() {
  const commissions = await prisma.commissionType.findMany({
    include: {
      options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
      extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
      customInputs: { include: { customInput: true }, orderBy: { sortIndex: "asc" } },
    },
    orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
  })

  return (
    <div className="container py-10 space-y-10">
      <h1 className="text-3xl font-bold">Commission Pricing</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-start">
        {commissions.map((commission) => (
          <CommissionCard key={commission.id} commission={commission} />
        ))}
      </div>
      <hr />
      <h2 className="text-2xl font-semibold">Request a Commission</h2>
      <CommissionOrderForm types={commissions} />
    </div>
  );
}