<script>
  import { cn } from '$lib/utils.js'

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

  const variants = {
    default:  'bg-primary text-primary-foreground shadow hover:bg-primary/90',
    outline:  'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
    ghost:    'hover:bg-accent hover:text-accent-foreground',
    link:     'text-primary underline-offset-4 hover:underline',
  }

  const sizes = {
    default: 'h-9 px-4 py-2 text-sm',
    sm:      'h-8 px-3 text-xs',
    lg:      'h-10 px-8 text-sm',
    icon:    'h-9 w-9',
  }
</script>

<button
  class={cn(
    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-colors',
    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
    'disabled:pointer-events-none disabled:opacity-50',
    '[&_svg]:pointer-events-none [&_svg]:shrink-0',
    variants[variant],
    sizes[size],
    className,
  )}
  {...rest}
>
  {@render children?.()}
</button>
