import { COMMODITY_SYMBOLS, COMMODITY_LABELS, type Commodity } from '@/lib/constants'
import { mineralColor } from '@/lib/minerals'

export function MineralChip({
  commodity,
  size = 'md',
}: {
  commodity: string
  size?: 'sm' | 'md'
}) {
  const symbol = COMMODITY_SYMBOLS[commodity as Commodity] ?? commodity
  const label = COMMODITY_LABELS[commodity as Commodity] ?? commodity
  const compact = size === 'sm'
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 6,
        padding: compact ? '2px 6px' : '3px 8px',
        border: '1px solid var(--line-soft)',
        background: 'var(--bg-elev)',
        fontFamily: 'var(--f-mono)',
        fontSize: compact ? 9.5 : 10.5,
        letterSpacing: '0.04em',
        textTransform: 'uppercase',
      }}
    >
      <span
        style={{
          width: compact ? 6 : 8,
          height: compact ? 6 : 8,
          background: mineralColor(commodity),
          display: 'inline-block',
        }}
      />
      <b style={{ fontWeight: 600 }}>{symbol}</b>
      {!compact && <span style={{ color: 'var(--muted)' }}>{label}</span>}
    </span>
  )
}