<script lang="ts">
  import { Button as BitsButton, type WithoutChildren } from 'bits-ui';
  import type { Snippet } from 'svelte';
  import { COLOR_MAP, VARIANT_MAP, SIZE_MAP } from './button.variants';
  import type { Color, Variant, Size } from './button.variants';

  type Props = WithoutChildren<BitsButton.RootProps> & {
    color?: Color;
    variant?: Variant;
    size?: Size;
    wide?: boolean;
    block?: boolean;
    square?: boolean;
    circle?: boolean;

    class?: string;
    children?: Snippet;
  };

  let {
    color,
    variant,
    size,
    wide,
    block,
    square,
    circle,
    class: className = '',
    children,
    ...restProps
  }: Props = $props();

  const classes = $derived(
    [
      'btn',
      color && COLOR_MAP[color],
      variant && VARIANT_MAP[variant],
      size && SIZE_MAP[size],
      wide && 'btn-wide',
      block && 'btn-block',
      square && 'btn-square',
      circle && 'btn-circle',
      className,
    ]
      .filter(Boolean)
      .join(' ')
  );
</script>

<BitsButton.Root class={classes.trim()} {...restProps}>
  {@render children?.()}
</BitsButton.Root>
