import { Color, colors } from '../../utils/colors.js'
import { radius } from '../../utils/radius.js'
import { Text } from '../Text/index.js'

type LegendProps = {
  label: string
  color: Color
}

function Legend({ label, color }: LegendProps) {
  return (
    <div
      key={label}
      style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}
    >
      <div
        style={{
          background: colors[color],
          flexShrink: 0,
          width: 4,
          height: 12,
          borderRadius: radius[4],
        }}
      />
      <Text singleLine variant="subtext-medium" color={color}>
        {label}
      </Text>
    </div>
  )
}

export { Legend }
export type { LegendProps }
