import React from 'react'
import styles from '@/app/styles/components/Badge.module.css'

type BadgeVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral'
type BadgeSize = 'sm' | 'md' | 'lg'

interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant
  size?: BadgeSize
  filled?: boolean
  icon?: React.ReactNode
  children: React.ReactNode
}

const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  (
    {
      variant = 'info',
      size = 'md',
      filled = false,
      icon,
      className = '',
      children,
      ...props
    },
    ref
  ) => {
    const baseClass = styles.badge
    const variantClass = styles[`badge--${variant}`] || ''
    const sizeClass = size !== 'md' ? styles[`badge--${size}`] : ''
    const filledClass = filled ? styles['badge--filled'] : ''

    return (
      <span
        ref={ref}
        className={`${baseClass} ${variantClass} ${sizeClass} ${filledClass} ${className}`.trim()}
        {...props}
      >
        {icon && <span className={styles.badge__icon}>{icon}</span>}
        {children}
      </span>
    )
  }
)

Badge.displayName = 'Badge'

export default Badge