<script setup lang="ts">
type Variant = 'primary' | 'secondary' | 'ghost' | 'dark' | 'danger'
type Size = 'sm' | 'md' | 'lg'

withDefaults(
  defineProps<{ variant?: Variant; size?: Size; type?: 'button' | 'submit'; disabled?: boolean }>(),
  { variant: 'secondary', size: 'md', type: 'button', disabled: false },
)
</script>

<template>
  <button :type="type" :disabled="disabled" :data-variant="variant" :data-size="size">
    <slot name="leading" />
    <slot />
    <slot name="trailing" />
  </button>
</template>

<style scoped>
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
  border: 1px solid;
}

button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button[data-size='sm'] { height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; }
button[data-size='md'] { height: 34px; padding: 0 14px; font-size: 13px; gap: 8px; }
button[data-size='lg'] { height: 42px; padding: 0 18px; font-size: 14px; gap: 10px; }

button[data-variant='primary']   { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
button[data-variant='primary']:hover:not(:disabled)   { filter: brightness(0.92); }

button[data-variant='secondary'] { background: var(--surface); color: var(--text); border-color: var(--border); }
button[data-variant='secondary']:hover:not(:disabled) { background: var(--elevated); }

button[data-variant='ghost']     { background: transparent; color: var(--text); border-color: transparent; }
button[data-variant='ghost']:hover:not(:disabled)     { background: var(--surface); }

button[data-variant='dark']      { background: #0A0A0A; color: #F4F3EE; border-color: #0A0A0A; }
button[data-variant='dark']:hover:not(:disabled)      { background: #1F1F1C; }

button[data-variant='danger']    { background: var(--surface); color: var(--bad); border-color: var(--border); }
button[data-variant='danger']:hover:not(:disabled)    { background: rgba(226, 48, 48, 0.08); }
</style>
