<script lang="ts">
  type Variant = 'primary' | 'secondary' | 'ghost';
  type Size = 'sm' | 'md' | 'large';

  let {
    variant = 'primary',
    size = 'md',
    disabled = false,
    loading = false,
    type = 'button' as 'button' | 'submit' | 'reset',
    label = '',
  } = $props();

  const base =
    'inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40';

  const sizeClasses = $derived(
    { sm: 'h-9 px-4 py-2 text-sm', md: 'h-12 min-w-[120px] px-6 py-3 text-base', large: 'h-14 px-8 py-4 text-lg' }[
      size
    ]
  );

  const variantClasses = $derived(
    {
      primary: 'bg-wald-500 text-white hover:bg-wald-600 active:bg-wald-700',
      secondary:
        'border-[1.5px] border-wald-500 bg-transparent text-wald-500 hover:bg-wald-50 active:bg-wald-100',
      ghost: 'bg-transparent px-4 py-3 text-stein-700 hover:bg-stein-100 active:bg-stein-200',
    }[variant]
  );

  const allClasses = $derived([base, sizeClasses, variantClasses].filter(Boolean).join(' '));
</script>

<button
  {type}
  {disabled}
  class={allClasses}
>
  {#if loading}
    <span class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
    <span>Laden...</span>
  {:else}
    <slot>{label}</slot>
  {/if}
</button>
