import { Chip, Tooltip } from '@mui/material'
import type { ReactElement } from 'react'
import { BADGE_COLORS } from '../../lib/ds'

export type BadgeSemanticVariant = keyof typeof BADGE_COLORS

export interface GenericBadgeProps {
  label: string
  /** Semantic variant key from BADGE_COLORS (preferred). */
  semanticVariant?: BadgeSemanticVariant
  /** Raw hex color — use only when no semantic variant fits. */
  color?: string
  /** outlined: border + text, no bg | solid: filled bg, white text */
  variant?: 'outlined' | 'solid'
  bold?: boolean
  icon?: ReactElement
  size?: 'small' | 'medium'
  tooltip?: string
  ariaLabel?: string
}

export function GenericBadge({
  label,
  semanticVariant,
  color: colorProp,
  variant = 'outlined',
  bold = false,
  icon,
  size = 'small',
  tooltip,
  ariaLabel,
}: GenericBadgeProps) {
  const color = semanticVariant ? BADGE_COLORS[semanticVariant] : (colorProp ?? '#9a9a9a')

  const chip = (
    <Chip
      size={size}
      label={label}
      icon={icon}
      aria-label={ariaLabel}
      sx={{
        fontWeight: bold ? 700 : 500,
        fontSize: size === 'small' ? '0.75rem' : '0.8125rem',
        bgcolor: variant === 'solid' ? color : 'transparent',
        color: variant === 'solid' ? 'white' : color,
        border: variant === 'outlined' ? `1px solid ${color}` : 'none',
        '& .MuiChip-icon': { ml: 0.5 },
      }}
    />
  )

  return tooltip ? <Tooltip title={tooltip} arrow>{chip}</Tooltip> : chip
}
