import styles from './Tag.module.css'
import { hashColor } from '../../utils/hashColor'
import { useTheme } from '../../providers/ThemeProvider'

type TagColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto'

interface TagProps {
  label: string
  onRemove?: () => void
  color?: TagColor
  className?: string
}

export function Tag({ label, onRemove, color = 'auto', className }: TagProps) {
  const { theme } = useTheme()
  const isAuto = color === 'auto'
  const hashColors = isAuto ? hashColor(label, theme) : null

  const inlineStyle = isAuto
    ? { backgroundColor: hashColors!.bg, color: hashColors!.text, borderColor: hashColors!.border }
    : undefined

  const classes = [styles.tag, !isAuto ? styles[color] : '', className ?? ''].filter(Boolean).join(' ')

  return (
    <span className={classes} style={inlineStyle}>
      {label}
      {onRemove && (
        <button className={styles.remove} onClick={onRemove} aria-label={`Remove ${label}`}>
          &times;
        </button>
      )}
    </span>
  )
}
