import { cva, type VariantProps } from 'class-variance-authority'
import { splitProps, type JSX } from 'solid-js'
import { cn } from '@/utils/cn'

const badgeVariants = cva('inline-flex items-center px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.15em] border-2', {
  variants: {
    variant: {
      neutral: 'bg-surface-high text-fg border-outline',
      accent: 'bg-primary text-on-primary border-primary',
      secondary: 'bg-fg text-surface border-fg',
      success: 'bg-success text-surface border-success',
      warning: 'bg-warning text-surface border-warning',
      danger: 'bg-danger text-on-danger border-danger',
    },
  },
  defaultVariants: {
    variant: 'neutral',
  },
})

interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}

export const Badge = (props: BadgeProps) => {
  const [local, rest] = splitProps(props, ['class', 'variant'])
  return <span class={cn(badgeVariants({ variant: local.variant }), local.class)} {...rest} />
}
