<script lang="ts">
  import type { Snippet } from 'svelte';

  interface Props {
    onclick: () => void;
    label: string;
    title?: string;
    active?: boolean;
    disabled?: boolean;
    /** Button size: 'sm' = 1.5rem, 'md' = 2rem (default), 'lg' = 2.25rem */
    size?: 'sm' | 'md' | 'lg';
    children: Snippet;
  }

  let {
    onclick,
    label,
    title,
    active = false,
    disabled = false,
    size = 'md',
    children,
  }: Props = $props();
</script>

<button
  class="icon-btn size-{size}"
  class:active
  {disabled}
  {onclick}
  aria-label={label}
  title={title ?? label}
>
  {@render children()}
</button>

<style>
  .icon-btn {
    background: transparent;
    border: none;
    color: var(--ctp-overlay1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0;
    transition: background 0.12s, color 0.12s;
  }

  .icon-btn:hover:not(:disabled) {
    background: var(--ctp-surface0);
    color: var(--ctp-text);
  }

  .icon-btn.active {
    background: var(--ctp-surface1);
    color: var(--ctp-text);
  }

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

  .icon-btn :global(svg) {
    width: 1rem;
    height: 1rem;
  }

  .size-sm { width: 1.5rem; height: 1.5rem; }
  .size-sm :global(svg) { width: 0.875rem; height: 0.875rem; }

  .size-md { width: 2rem; height: 2rem; }

  .size-lg { width: 2.25rem; height: 2.25rem; }
  .size-lg :global(svg) { width: 1.125rem; height: 1.125rem; }
</style>
