interface GlyphIconProps {
  glyph: string
  colorCode?: string
  size?: 'sm' | 'md' | 'lg'
}

export function GlyphIcon({
  glyph,
  colorCode = '#94a3b8',
  size = 'sm',
}: GlyphIconProps) {
  const sizeClass = {
    sm: 'text-xs w-4 h-4',
    md: 'text-sm w-5 h-5',
    lg: 'text-base w-6 h-6',
  }[size]

  return (
    <span
      className={`inline-flex items-center justify-center font-mono font-bold select-none border border-slate-900 bg-slate-950/60 leading-none ${sizeClass}`}
      style={{ color: colorCode, borderColor: `${colorCode}20` }}
    >
      {glyph}
    </span>
  )
}
