import { prisma } from "@/lib/prisma";
import { BookingForm } from "@/components/booking-form";

export const dynamic = "force-dynamic";

export default async function BookPage({
  searchParams,
}: {
  searchParams: Promise<{ service?: string }>;
}) {
  const { service: preselectedServiceId } = await searchParams;
  const services = await prisma.service.findMany({
    where: { active: true },
    orderBy: { createdAt: "asc" },
  });

  return (
    <div>
      <section className="bg-blush px-6 py-16 text-center">
        <p className="text-xs uppercase tracking-wide-plus text-rose-dark">Reserve Your Spot</p>
        <h1 className="mt-3 font-display text-4xl text-rosewood">Book an Appointment</h1>
        <p className="mx-auto mt-4 max-w-lg text-sm text-ink/70">
          Full payment is collected securely via Stripe to confirm your booking.
        </p>
      </section>

      <section className="px-6 py-16">
        <div className="mx-auto max-w-2xl">
          <BookingForm
            services={services.map((s) => ({
              id: s.id,
              name: s.name,
              priceCents: s.priceCents,
              durationMinutes: s.durationMinutes,
            }))}
            preselectedServiceId={preselectedServiceId}
          />
        </div>
      </section>
    </div>
  );
}
