cyclone/src/components/ActivityFeed.tsx

import {
  Banknote,
  CheckCircle2,
  Circle,
  FileText,
  Pill,
  UserPlus,
  Wrench,
  XCircle,
  type LucideIcon,
} from "lucide-react";
import { fmt } from "@/lib/format";
import type { Activity } from "@/types";
import { cn } from "@/lib/utils";

const kindConfig: Record<
  Activity["kind"],
  { icon: LucideIcon; tone: string; tint: string }
> = {
  claim_submitted: {
    icon: FileText,
    tone: "text-[hsl(var(--accent))]",
    tint: "bg-accent/10",
  },
  claim_accepted: {
    icon: CheckCircle2,
    tone: "text-[hsl(var(--success))]",
    tint: "bg-[hsl(var(--success)/0.12)]",
  },
  claim_paid: {
    icon: Banknote,
    tone: "text-[hsl(var(--success))]",
    tint: "bg-[hsl(var(--success)/0.12)]",
  },
  claim_denied: {
    icon: XCircle,
    tone: "text-destructive",
    tint: "bg-destructive/12",
  },
  remit_received: {
    icon: Pill,
    tone: "text-[hsl(var(--warning))]",
    tint: "bg-[hsl(var(--warning)/0.12)]",
  },
  provider_added: {
    icon: UserPlus,
    tone: "text-foreground",
    tint: "bg-muted/60",
  },
  manual_match: {
    icon: Wrench,
    tone: "text-muted-foreground",
    tint: "bg-muted/40",
  },
};

const FALLBACK_KIND: { icon: LucideIcon; tone: string; tint: string } = {
  icon: Circle,
  tone: "text-muted-foreground",
  tint: "bg-muted/40",
};

export function ActivityFeed({
  items,
  emptyMessage = "No activity yet.",
}: {
  items: Activity[];
  emptyMessage?: string;
}) {
  if (items.length === 0) {
    return (
      <div className="text-[13px] text-muted-foreground px-2 py-6 text-center">
        {emptyMessage}
      </div>
    );
  }
  return (
    <ul className="divide-y divide-border/40">
      {items.map((a) => {
        const cfg = kindConfig[a.kind] ?? FALLBACK_KIND;
        const Icon = cfg.icon;
        return (
          <li
            key={a.id}
            className="flex items-start gap-3 py-3 first:pt-0 last:pb-0"
          >
            <div
              className={cn(
                "mt-0.5 h-7 w-7 shrink-0 rounded-md ring-1 ring-inset ring-border/40 flex items-center justify-center",
                cfg.tint,
                cfg.tone
              )}
            >
              <Icon className="h-3.5 w-3.5" strokeWidth={1.75} />
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-[13px] text-foreground/95 leading-snug">
                {a.message}
              </div>
              <div className="mono text-[10.5px] text-muted-foreground mt-0.5 flex items-center gap-2">
                <span>{fmt.relative(a.timestamp)}</span>
                {a.npi ? (
                  <>
                    <span className="opacity-40">·</span>
                    <span>{a.npi}</span>
                  </>
                ) : null}
                {a.amount ? (
                  <>
                    <span className="opacity-40">·</span>
                    <span>{fmt.usd(a.amount)}</span>
                  </>
                ) : null}
              </div>
            </div>
          </li>
        );
      })}
    </ul>
  );
}