import Link from "next/link";
import { notFound } from "next/navigation";
import { meetings } from "@/lib/mock";
import StatusPill from "@/components/StatusPill";

export default async function MeetingDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const meeting = meetings.find((item) => item.id === id);

  if (!meeting) {
    notFound();
  }

  return (
    <div className="space-y-6">
      <Link href="/meetings" className="text-body font-semibold text-benell-brown hover:underline">
        ← Volver a Reuniones
      </Link>

      <header>
        <h1 className="text-display">{meeting.department}</h1>
        <p className="text-body-lg text-benell-text-soft">{meeting.title}</p>
      </header>

      <section className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <article className="rounded-benell border border-benell-stroke bg-benell-surface p-6">
          <h2 className="text-h2 font-semibold">Última reunión</h2>
          <p className="text-body mt-4 text-benell-text-soft">
            Campaña San Valentín va muy bien, con 95% de avance. Se acordó reforzar delivery apps esta semana.
          </p>
        </article>

        <article className="rounded-benell border border-benell-stroke bg-benell-surface p-6">
          <h2 className="text-h2 font-semibold">Próxima reunión</h2>
          <p className="text-h2 mt-4 font-semibold">{meeting.schedule}</p>
          <p className="text-body mt-2 text-benell-text-soft text-tabular">{meeting.commitments} compromisos abiertos</p>
          <div className="mt-4">
            <StatusPill status={meeting.status} />
          </div>
        </article>
      </section>
    </div>
  );
}
