Meeting Card

import { Clock, FileText, Sparkles, Video } from "lucide-react";
import { cn } from "@/lib/utils";

export interface MeetingCardProps {
  title?: string;
  when?: string;
  duration?: string;
  platform?: string;
  participants?: string[];
  summary?: string[];
  actions?: { text: string; owner: string; done?: boolean }[];
  href?: string;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";
const TONES = [
  "from-da-primary to-da-accent",
  "from-da-accent to-da-success",
  "from-da-danger to-da-primary",
  "from-da-warning to-da-danger",
  "from-da-success to-da-primary",
];

/** Meeting recap card: title, time/platform meta, participant stack, AI summary bullets, action items with owners and a link to the transcript. */
export function MeetingCard({
  title = "Q4 roadmap sync",
  when = "Today, 10:00",
  duration = "32 min",
  platform = "Google Meet",
  participants = ["Amara Diallo", "Leo Park", "Sofia Rossi", "Noah Klein", "Jin Park"],
  summary = ["Offline mode moves to November.", "Pricing variant B wins (+18% trial starts).", "Second designer role approved."],
  actions = [
    { text: "Draft offline mode RFC", owner: "Leo" },
    { text: "Ship pricing variant B to 100%", owner: "Sofia", done: true },
  ],
  href = "#transcript",
  className,
}: MeetingCardProps) {
  const shown = participants.slice(0, 4);
  const more = participants.length - shown.length;
  return (
    <article className={cn("relative rounded-da-lg p-5 shadow-da-md", GLASS, className)}>
      <header className="flex items-start justify-between gap-4">
        <div>
          <h3 className="font-da-display text-lg font-semibold tracking-da-display">{title}</h3>
          <p className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-da-muted-fg">
            <span>{when}</span>
            <span className="inline-flex items-center gap-1">
              <Clock aria-hidden className="size-3.5" /> {duration}
            </span>
            <span className="inline-flex items-center gap-1">
              <Video aria-hidden className="size-3.5" /> {platform}
            </span>
          </p>
        </div>
        <div className="flex -space-x-2" aria-label={`${participants.length} participants: ${participants.join(", ")}`} role="img">
          {shown.map((p, i) => (
            <span
              key={p}
              className={cn(
                "grid size-8 place-items-center rounded-full bg-gradient-to-br text-[10px] font-semibold text-da-primary-fg ring-2 ring-da-bg",
                TONES[i % TONES.length],
              )}
            >
              {p
                .split(" ")
                .map((w) => w[0])
                .join("")}
            </span>
          ))}
          {more > 0 && <span className="grid size-8 place-items-center rounded-full bg-da-surface-2 text-[10px] font-semibold ring-2 ring-da-bg">+{more}</span>}
        </div>
      </header>
      <div className="mt-4 rounded-da-md bg-da-surface-2 p-4">
        <p className="inline-flex items-center gap-1.5 text-xs font-semibold text-da-primary">
          <Sparkles aria-hidden className="size-3.5" /> AI summary
        </p>
        <ul className="mt-2 space-y-1.5 text-sm">
          {summary.map((s) => (
            <li key={s} className="flex gap-2">
              <span aria-hidden className="mt-2 size-1 shrink-0 rounded-full bg-da-fg" />
              {s}
            </li>
          ))}
        </ul>
      </div>
      <p className="mt-4 text-xs font-semibold text-da-muted-fg">Action items</p>
      <ul className="mt-2 space-y-1.5">
        {actions.map((a) => (
          <li key={a.text} className="flex items-center gap-2 text-sm">
            <span
              aria-hidden
              className={cn(
                "grid size-4 place-items-center rounded-[5px] border",
                a.done ? "border-da-success bg-da-success text-da-success-fg" : "border-da-border-strong",
              )}
            >
              {a.done && "✓"}
            </span>
            <span className={cn("flex-1", a.done && "text-da-muted-fg line-through")}>
              {a.text}
              <span className="sr-only">{a.done ? " (done)" : " (open)"}</span>
            </span>
            <span className="rounded-da-pill bg-da-surface-2 px-2 py-0.5 text-[11px] font-medium">@{a.owner}</span>
          </li>
        ))}
      </ul>
      <a
        href={href}
        className="da-focus da-transition mt-5 inline-flex items-center gap-1.5 rounded-da-pill text-sm font-semibold text-da-primary hover:underline"
      >
        <FileText aria-hidden className="size-4" /> Open transcript
      </a>
    </article>
  );
}

export default MeetingCard;