import type { HTMLAttributes } from 'react'
import { cn } from '../../utils/cn'

export type BadgeVariant = 'primary' | 'secondary' | 'destructive' | 'positive' | 'outline'

type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
  variant?: BadgeVariant
}

export function Badge({ variant = 'primary', className, children, ...props }: BadgeProps) {
  return (
    <span className={cn('badge', `badge-${variant}`, className)} {...props}>
      {children}
    </span>
  )
}