import { PinIcon } from './icons';

interface Props {
  count: number;
  onClick: () => void;
}

// Compact chip rendered in the conv header that opens the pinned panel.
// Renders nothing when count is 0 so a fresh conv shows no clutter.
export function PinnedMessagesPill({ count, onClick }: Props) {
  if (count === 0) return null;
  return (
    <button
      type="button"
      onClick={onClick}
      className="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-full border border-line bg-surface-3 px-2.5 text-xs font-medium text-fg-muted transition hover:bg-surface-2 hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
      title="Angepinnte Nachrichten anzeigen"
    >
      <PinIcon className="h-3 w-3 text-accent" />
      <span>{count} angepinnt</span>
    </button>
  );
}