import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { formatMoney, formatDuration } from "@/lib/format";

export const dynamic = "force-dynamic";

export default async function ServicesPage() {
  const services = await prisma.service.findMany({
    where: { active: true },
    orderBy: { createdAt: "asc" },
  });

  return (
    <div>
      <section className="bg-blush px-6 py-20 text-center">
        <p className="text-xs uppercase tracking-wide-plus text-rose-dark">Menu</p>
        <h1 className="mt-3 font-display text-4xl text-rosewood">Services</h1>
        <p className="mx-auto mt-4 max-w-lg text-sm text-ink/70">
          Every service includes a consultation so your result is exactly what
          you came in for.
        </p>
      </section>

      <section className="px-6 py-16">
        <div className="mx-auto max-w-3xl divide-y divide-blush-dark/60">
          {services.map((service) => (
            <div key={service.id} className="flex items-center justify-between gap-6 py-6">
              <div>
                <h2 className="font-display text-xl text-rosewood">{service.name}</h2>
                <p className="mt-1 max-w-md text-sm text-ink/70">{service.description}</p>
                <p className="mt-2 text-xs uppercase tracking-wide-plus text-rose-dark">
                  {formatDuration(service.durationMinutes)}
                </p>
              </div>
              <div className="flex flex-col items-end gap-3">
                <span className="font-display text-lg text-rosewood">
                  {formatMoney(service.priceCents)}
                </span>
                <Link
                  href={`/book?service=${service.id}`}
                  className="rounded-full bg-rosewood px-5 py-2 text-xs uppercase tracking-wide-plus text-cream transition hover:bg-rose-dark"
                >
                  Book
                </Link>
              </div>
            </div>
          ))}
          {services.length === 0 && (
            <p className="py-12 text-center text-sm text-ink/60">
              No services are published yet. Check back soon.
            </p>
          )}
        </div>
      </section>
    </div>
  );
}
