// <HeaderPill> — the inbox/todos flyout triggers in the header's right
// cluster. A thin wrapper over `@hive/shared`'s `Badge` (icon+label+
// value+onClick already covers this shape exactly) rather than a
// bespoke pill — mara, reviewing the first cut of this (a hand-styled
// `.header-pill` matched to `Badge`'s own CSS values rather than the
// component itself): "cant we reuse the badge component". Only two
// things this wrapper still owns: hiding at count 0 (`pill.hidden =
// count === 0` in the old page) and picking the inbox/todos tone so
// the count reads amber/green like it always has (`Badge`'s `tone`
// colours the value, which here is the count).
import { Badge, type BadgeTone } from "@hive/shared/badge.js";

export interface HeaderPillProps {
  kind: "inbox" | "todos";
  icon: string;
  label: string;
  count: number;
  onClick: () => void;
}

const TONE: Record<HeaderPillProps["kind"], BadgeTone> = {
  inbox: "warning",
  todos: "positive",
};

export function HeaderPill({
  kind,
  icon,
  label,
  count,
  onClick,
}: HeaderPillProps) {
  if (count === 0) return null;
  return (
    <Badge
      icon={icon}
      label={label}
      value={count}
      tone={TONE[kind]}
      onClick={onClick}
      title={`open ${label} flyout`}
    />
  );
}