interface LabelBadgeProps {
  name: string
  color: { R: number; G: number; B: number }
  onClick?: (name: string) => void
}

function contrastColor(r: number, g: number, b: number): string {
  // Perceived luminance — pick black or white text for readability
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
  return luminance > 0.55 ? 'rgba(0,0,0,0.75)' : 'rgba(255,255,255,0.9)'
}

// Coloured label pill. Renders as a <button> when onClick is provided,
// used in BugRow and UserProfilePage to filter issues by label.
export function LabelBadge({ name, color, onClick }: LabelBadgeProps) {
  const bg = `rgb(${color.R},${color.G},${color.B})`
  const text = contrastColor(color.R, color.G, color.B)

  if (onClick) {
    return (
      <button
        type="button"
        className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium hover:opacity-80"
        style={{ backgroundColor: bg, color: text }}
        onClick={(e) => { e.preventDefault(); e.stopPropagation(); onClick(name) }}
      >
        {name}
      </button>
    )
  }

  return (
    <span
      className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
      style={{ backgroundColor: bg, color: text }}
    >
      {name}
    </span>
  )
}