const HEX = 16;
const CHANNEL_MAX = 255;
const LIGHT_LUMINANCE = 0.55;
const LUMA = [0.299, 0.587, 0.114] as const;

function readableText(color: string): string {
  const channels = [0, 2, 4].map((offset) => Number.parseInt(color.slice(offset, offset + 2), HEX) / CHANNEL_MAX);
  const luminance = channels.reduce((sum, channel, index) => sum + channel * LUMA[index], 0);
  return luminance > LIGHT_LUMINANCE ? "#0a0a0a" : "#ffffff";
}

export function LabelChip({ name, color }: { name: string; color: string }) {
  return (
    <span
      className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
      style={{ backgroundColor: `#${color}`, color: readableText(color) }}
    >
      {name}
    </span>
  );
}