import type { HTMLAttributes, ReactNode } from 'react'
import { cn } from '@/lib/utils'

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?:
    | 'navy'
    | 'info'
    | 'info-light'
    | 'success'
    | 'success-light'
    | 'error'
    | 'error-light'
    | 'warning'
    | 'warning-light'
    | 'neutral'
    | 'white'
  leftIcon?: ReactNode
  rightIcon?: ReactNode
}

const variantStyles: Record<string, string> = {
  navy: 'bg-badge-navy text-white',
  info: 'bg-badge-info text-white',
  'info-light': 'bg-badge-info-light text-primary',
  success: 'bg-badge-success text-white',
  'success-light': 'bg-badge-success-light text-badge-on-success-light',
  error: 'bg-badge-error text-white',
  'error-light': 'bg-badge-error-light text-badge-on-error-light',
  warning: 'bg-badge-warning text-white',
  'warning-light': 'bg-badge-warning-light text-badge-on-warning-light',
  neutral: 'bg-badge-neutral text-text-secondary',
  white: 'bg-surface text-primary border border-primary',
}

export function Badge({
  variant = 'info',
  leftIcon,
  rightIcon,
  className,
  children,
  ...props
}: BadgeProps) {
  return (
    <span
      className={cn(
        'inline-flex h-[30px] items-center gap-1 rounded-lg px-3 text-small font-bold leading-[19px]',
        variantStyles[variant],
        className,
      )}
      {...props}
    >
      {leftIcon && (
        <span className="shrink-0 [&>svg]:size-full size-[18px]">{leftIcon}</span>
      )}
      {children}
      {rightIcon && (
        <span className="shrink-0 [&>svg]:size-full size-[18px]">{rightIcon}</span>
      )}
    </span>
  )
}