import { Calendar, Clock3, Users } from "lucide-react";
import { meetings } from "@/lib/mock";
import StatusPill from "@/components/StatusPill";
import Link from "next/link";

const departments = ["Mercadotecnia", "Finanzas", "Capital Humano", "Operaciones", "Projects"];

export default function MeetingsPage() {
  return (
    <div className="space-y-6">
      <header>
        <h1 className="text-display">Reuniones semanales</h1>
        <p className="text-body-lg text-benell-text-soft">Control de juntas departamentales y compromisos</p>
      </header>

      <div className="inline-flex flex-wrap gap-2 rounded-pill bg-benell-tan/70 p-1">
        {departments.map((department, index) => (
          <button
            key={department}
            type="button"
            className={`text-label rounded-pill px-4 py-1.5 font-semibold ${
              index === 0 ? "bg-benell-surface" : "text-benell-brown"
            }`}
          >
            {department}
          </button>
        ))}
      </div>

      <section className="space-y-4">
        {meetings.map((meeting) => (
          <article key={meeting.id} className="rounded-benell border border-benell-stroke bg-benell-surface p-5">
            <div className="flex flex-wrap items-center gap-4">
              <div className="text-h2 min-w-0 flex items-center gap-2 font-semibold">
                <Calendar className="size-6 text-benell-text-soft" aria-hidden />
                <span className="truncate">{meeting.title}</span>
              </div>
              <StatusPill status={meeting.status} />
            </div>
            <div className="text-body mt-3 flex flex-wrap gap-5 text-benell-text-soft">
              <p className="inline-flex items-center gap-2 text-tabular">
                <Users className="size-5" aria-hidden />
                {meeting.attendees} asistentes
              </p>
              <p className="inline-flex items-center gap-2 text-tabular">
                <Clock3 className="size-5" aria-hidden />
                {meeting.commitments} compromisos
              </p>
            </div>
            <Link
              href={`/meetings/${meeting.id}`}
              className="text-label mt-4 inline-flex font-semibold text-benell-caramel outline-none transition hover:text-benell-brown focus-visible:ring-2 focus-visible:ring-benell-brown"
            >
              Ver detalle de reunión →
            </Link>
          </article>
        ))}
      </section>
    </div>
  );
}
