<script lang="ts">
  export let variant: 'primary' | 'secondary' | 'ghost' | 'danger' = 'secondary';
  export let size: 'sm' | 'md' = 'md';
  export let type: 'button' | 'submit' | 'reset' = 'button';
  export let disabled: boolean = false;
</script>

<button class={`btn ${variant} ${size}`} {type} {disabled} on:click on:keydown on:focus on:blur {...$$restProps}>
  <slot />
</button>

<style>
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    min-height: 36px;
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
    text-decoration: none;
  }
  .btn.sm { min-height: 30px; padding: 0 10px; font-size: 0.95rem; }
  .btn.md { min-height: 36px; }

  .btn:hover { box-shadow: var(--shadow-sm); }
  .btn:active { transform: translateY(0.5px); }
  .btn:disabled { opacity: 0.6; cursor: not-allowed; }

  .btn.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
  }
  .btn.primary:hover { filter: brightness(0.98); }
  .btn.danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
  }
  .btn.ghost {
    background: transparent;
    border-color: transparent;
  }
  .btn.secondary {
    background: var(--color-surface);
  }
</style>
