<script setup lang="ts">
/**
 * Button — primary action control; `variant="primary"` carries the live game accent.
 * Variants: primary | secondary | ghost | outline | danger | danger-soft.
 * Sizes: sm | md | lg. Pass Lucide names via `icon` / `iconRight`.
 * Native click bubbles via attribute fall-through (root is the <button>).
 */
import { computed } from 'vue'
import Icon from './Icon.vue'

const props = withDefaults(
  defineProps<{
    variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'danger-soft'
    size?: 'sm' | 'md' | 'lg'
    icon?: string
    iconRight?: string
    loading?: boolean
    block?: boolean
    disabled?: boolean
    type?: 'button' | 'submit' | 'reset'
  }>(),
  { variant: 'primary', size: 'md', loading: false, block: false, disabled: false, type: 'button' },
)

const iconSize = computed(() => (props.size === 'lg' ? 17 : props.size === 'sm' ? 14 : 15))
</script>

<template>
  <button
    :type="type"
    :disabled="disabled || loading"
    :class="[
      'cc-btn',
      `cc-btn--${variant}`,
      size !== 'md' && `cc-btn--${size}`,
      block && 'cc-btn--block',
    ]"
  >
    <span v-if="loading" class="cc-btn__spin" />
    <Icon v-else-if="icon" :name="icon" :size="iconSize" :stroke-width="2.25" />
    <span v-if="$slots.default"><slot /></span>
    <Icon v-if="iconRight && !loading" :name="iconRight" :size="iconSize" :stroke-width="2.25" />
  </button>
</template>

<style>
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); line-height: 1;
  white-space: nowrap; height: var(--control-h-md); padding: 0 14px;
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
}
.cc-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cc-btn:active { transform: translateY(0.5px); }
.cc-btn[disabled], .cc-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.cc-btn--block { width: 100%; }
.cc-btn--sm { height: var(--control-h-sm); padding: 0 10px; font-size: var(--text-xs); border-radius: var(--radius-sm); gap: 6px; }
.cc-btn--lg { height: var(--control-h-lg); padding: 0 18px; font-size: var(--text-base); gap: 9px; }

.cc-btn--primary { background: var(--accent); color: var(--accent-contrast); }
.cc-btn--primary:hover { background: var(--accent-hover); }
.cc-btn--primary:active { background: var(--accent-press); }

.cc-btn--secondary { background: var(--surface-raised-2); color: var(--text-primary); box-shadow: var(--ring-default); }
.cc-btn--secondary:hover { background: var(--surface-active); }

.cc-btn--ghost { background: transparent; color: var(--text-secondary); }
.cc-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }

.cc-btn--outline { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-border); }
.cc-btn--outline:hover { background: var(--accent-soft); }

.cc-btn--danger { background: var(--danger); color: #fff; }
.cc-btn--danger:hover { filter: brightness(1.1); }

.cc-btn--danger-soft { background: var(--status-offline-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--status-offline-border); }
.cc-btn--danger-soft:hover { background: var(--danger); color: #fff; }

.cc-btn__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: cc-btn-spin 0.6s linear infinite; }
@keyframes cc-btn-spin { to { transform: rotate(360deg); } }
</style>
