<script lang="ts">
  interface Props {
    variant?: 'primary' | 'secondary' | 'ghost';
    size?: 'default' | 'small' | 'large';
    disabled?: boolean;
    onclick?: (e: MouseEvent) => void;
    type?: 'button' | 'submit';
    class?: string;
    children?: any;
  }

  let {
    variant = 'primary',
    size = 'default',
    disabled = false,
    onclick,
    type = 'button',
    class: className = '',
    children
  }: Props = $props();
</script>

<button
  {type}
  {disabled}
  {onclick}
  class="btn btn-{variant} btn-{size} {className}"
>
  {@render children?.()}
</button>

<style>
  .btn {
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.6s ease;
    font-family: var(--font-heading);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-default {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
  }

  .btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--sky-apricot-dark) 0%, var(--sky-apricot) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(229, 168, 120, 0.3);
  }

  .btn-primary:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(229, 168, 120, 0.5);
    filter: brightness(1.05);
  }

  .btn-secondary {
    background: var(--sky-cloud);
    color: var(--sky-slate);
    border: 1px solid var(--sky-blue-pale);
  }

  .btn-secondary:hover:not(:disabled) {
    background: var(--sky-blue-pale);
    color: var(--sky-slate-dark);
    transform: translateY(-2px);
  }

  .btn-ghost {
    background: none;
    color: var(--sky-slate);
    border: none;
  }

  .btn-ghost:hover:not(:disabled) {
    background: var(--sky-cloud);
    color: var(--sky-slate-dark);
  }
</style>
