<script lang="ts">
  import { cn } from '$lib/utils'
  import { buttonVariants, type ButtonVariants } from '$lib/button-variants'
  import type { Snippet } from 'svelte'
  import type { HTMLButtonAttributes } from 'svelte/elements'

  interface Props extends HTMLButtonAttributes {
    variant?: ButtonVariants['variant']
    size?: ButtonVariants['size']
    class?: string
    children?: Snippet
  }

  let {
    variant = 'default',
    size = 'default',
    class: className,
    children,
    ...rest
  }: Props = $props()
</script>

<button
  data-slot="button"
  class={cn(buttonVariants({ variant, size }), className)}
  {...rest}
>
  {#if children}
    {@render children()}
  {/if}
</button>
