<script setup lang="ts">
/**
 * IconButton — square icon-only action button.
 * Variants: ghost | solid | accent | danger.
 * Sizes: sm | md | lg.
 * Native click bubbles via attribute fall-through (root is <button>).
 */
import { computed } from 'vue'
import Icon from './Icon.vue'

const props = withDefaults(
  defineProps<{
    icon: string
    variant?: 'ghost' | 'solid' | 'accent' | 'danger'
    size?: 'sm' | 'md' | 'lg'
    active?: boolean
    label?: string
    disabled?: boolean
  }>(),
  { variant: 'ghost', size: 'md', active: false, disabled: false },
)

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

<template>
  <button
    type="button"
    :aria-label="label"
    :title="label"
    :disabled="disabled"
    :class="[
      'cc-iconbtn',
      variant !== 'ghost' && `cc-iconbtn--${variant}`,
      size !== 'md' && `cc-iconbtn--${size}`,
      active && 'cc-iconbtn--active',
    ]"
  >
    <Icon :name="icon" :size="iconPx" :stroke-width="2" />
  </button>
</template>

<style>
.cc-iconbtn {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:var(--control-h-md); height:var(--control-h-md); border-radius:var(--radius-md);
  border:1px solid transparent; background:transparent; color:var(--text-secondary);
  cursor:pointer; transition:var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
}
.cc-iconbtn:hover { background:var(--surface-hover); color:var(--text-primary); }
.cc-iconbtn:active { transform: translateY(0.5px); }
.cc-iconbtn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.cc-iconbtn[disabled] { opacity:.4; pointer-events:none; }
.cc-iconbtn--sm { width:var(--control-h-sm); height:var(--control-h-sm); border-radius:var(--radius-sm); }
.cc-iconbtn--lg { width:var(--control-h-lg); height:var(--control-h-lg); }
.cc-iconbtn--solid { background:var(--surface-raised-2); box-shadow:var(--ring-default); }
.cc-iconbtn--solid:hover { background:var(--surface-active); }
.cc-iconbtn--accent { background:var(--accent); color:var(--accent-contrast); }
.cc-iconbtn--accent:hover { background:var(--accent-hover); }
.cc-iconbtn--danger:hover { background:var(--status-offline-soft); color:var(--danger); }
.cc-iconbtn--active { background:var(--accent-soft); color:var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-border); }
</style>
