import Link from "next/link";
import type { Meeting } from "@/lib/types";
import StatusPill from "@/components/StatusPill";

type MeetingCardProps = {
  meeting: Meeting;
};

export default function MeetingCard({ meeting }: MeetingCardProps) {
  return (
    <article className="rounded-benell border border-benell-stroke bg-benell-surface p-4 shadow-benell md:p-5">
      <div className="mb-3 flex items-start justify-between gap-3">
        <h3 className="text-h2 min-w-0 break-words font-semibold">{meeting.department}</h3>
        <StatusPill status={meeting.status} />
      </div>
      <p className="text-body-lg text-benell-text-soft">{meeting.schedule}</p>
      <div className="text-body mt-4 border-t border-benell-stroke pt-3 text-benell-text-soft">
        <p>{meeting.attendees} asistentes</p>
        <p>{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 focus-visible:ring-offset-2"
      >
        Ver detalle de reunión →
      </Link>
    </article>
  );
}
