import { forwardRef } from 'react'
import styles from './FilterPill.module.css'

interface FilterPillProps {
  label: string
  count?: number
  active?: boolean
  dot?: boolean
  dotColor?: string
  activeColor?: string
  onClick?: () => void
  className?: string
}

export const FilterPill = forwardRef<HTMLButtonElement, FilterPillProps>(
  ({
    label,
    count,
    active = false,
    dot = false,
    dotColor,
    activeColor,
    onClick,
    className,
  }, ref) => {
    const classes = [
      styles.pill,
      active ? styles.active : '',
      active && activeColor ? styles.activeColored : '',
      className ?? '',
    ].filter(Boolean).join(' ')

    const activeStyle = active && activeColor
      ? { borderColor: activeColor, backgroundColor: `color-mix(in srgb, ${activeColor} 12%, transparent)`, color: activeColor } as React.CSSProperties
      : undefined

    return (
      <button ref={ref} className={classes} style={activeStyle} onClick={onClick} type="button" data-active={active || undefined}>
        {dot && (
          <span
            className={`${styles.dot} ${!active ? styles.dotMuted : ''}`}
            style={dotColor ? { background: active ? dotColor : undefined } : undefined}
          />
        )}
        <span className={styles.label}>{label}</span>
        {count !== undefined && (
          <span className={styles.count}>{count}</span>
        )}
      </button>
    )
  },
)

FilterPill.displayName = 'FilterPill'
