<script lang="ts" module>
  export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
</script>

<script lang="ts">
  import { cn } from '@/lib/utils'
  import type { Snippet } from 'svelte'

  interface Props {
    variant?: BadgeVariant
    class?: string
    children: Snippet
  }

  let { variant = 'default', class: className, children }: Props = $props()

  const baseClasses = 'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit max-w-full whitespace-nowrap [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none [&>svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow] overflow-hidden text-ellipsis'

  const variantClasses: Record<BadgeVariant, string> = {
    default: 'border-transparent bg-primary text-primary-foreground',
    secondary: 'border-transparent bg-secondary text-secondary-foreground',
    destructive: 'border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70',
    outline: 'text-foreground'
  }
</script>

<span
  data-slot="badge"
  class={cn(baseClasses, variantClasses[variant], className)}
>
  {@render children()}
</span>
