Noise Gate: Support Inbox

import { NoiseGate, type NoiseGateItem } from "@/components/ui/noise-gate";

function Icon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
      <path d={d} />
    </svg>
  );
}

function Avatar({ initials, className }: { initials: string; className: string }) {
  return (
    <span className={`grid size-5 place-items-center rounded-full text-[9px] font-semibold text-white ${className}`}>
      {initials}
    </span>
  );
}

const clock = "M8 4.5V8l2.5 1.5M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Z";
const queue = "M2.5 4h11M2.5 8h11M2.5 12h6";
const trendDown = "M2 4.5l4.5 4.5 2.5-2.5L14 11.5M14 8v3.5h-3.5";
const reply = "M6 4 2.5 7.5 6 11M2.5 7.5H10a3.5 3.5 0 0 1 3.5 3.5v1";

const tickets: NoiseGateItem[] = [
  {
    tag: "SLA",
    tone: "critical",
    icon: <Icon d={clock} />,
    title: "Order #48213 hasn't moved in 9 days",
    detail: "First reply overdue by 3h 12m",
  },
  {
    icon: <Avatar initials="MK" className="bg-violet-500" />,
    title: "“Is anyone actually reading these?”",
    detail: "Maya K. · 4th follow-up",
  },
  { tag: "Queue", tone: "warning", icon: <Icon d={queue} />, title: "214 chats waiting", detail: "Longest wait 38 min" },
  {
    tag: "Refund",
    tone: "critical",
    repeat: 3,
    title: "Refund still not processed",
    detail: "Customer wrote 3 times in 10 min",
  },
  { icon: <Icon d={reply} />, title: "“Sorry for the delay” sent 1,980×", detail: "Most used macro this week" },
  { tag: "Escalated", tone: "warning", title: "Chargeback threatened on #47790", detail: "Assigned to nobody" },
  {
    icon: <Avatar initials="JD" className="bg-sky-500" />,
    title: "“Fine, I'll just cancel then.”",
    detail: "Jordan D. · live chat",
  },
  {
    tag: "CSAT",
    tone: "critical",
    icon: <Icon d={trendDown} />,
    title: "Satisfaction down to 61%",
    detail: "14 points lower than last month",
  },
  { mono: true, title: "urgent, URGENT, urgent!!", detail: "Three tags, one meaning" },
  { tag: "Handoff", tone: "warning", title: "Night shift notes missing", detail: "92 tickets carried over" },
];

export function NoiseGateDemo() {
  return (
    <NoiseGate
      className="max-w-5xl"
      items={tickets}
      noiseTitle={
        <>
          Answering tickets with <span className="text-zinc-500 dark:text-zinc-400">“canned replies”</span>
        </>
      }
      calmTitle="Answering with Harbor"
      count={1284}
      countPrefix="Resolved"
      countSuffix="tickets today"
    />
  );
}