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

    // Shared square icon button — extracted from the near-identical
    // `.icon-btn` copies across the app so the size, hover, and variant
    // treatment live in one place. Callers pass the lucide icon as the child
    // and any button attributes (onclick, disabled, aria-label, title,
    // data-testid) straight through. `size`/`radius` cover the two larger
    // header/search buttons without forcing the 32px default everywhere.
    type Variant = 'plain' | 'primary' | 'danger';

    let {
        variant = 'plain',
        size = 32,
        radius = 'sm',
        children,
        ...rest
    }: {
        variant?: Variant;
        size?: number;
        radius?: 'sm' | 'md';
        children: Snippet;
    } & HTMLButtonAttributes = $props();
</script>

<!-- `type="button"` precedes the spread so a caller can still override it
     (e.g. a submit button) while the default never submits a form. -->
<button
    type="button"
    class="icon-btn {variant} radius-{radius}"
    style:--ib-size="{size}px"
    {...rest}
>
    {@render children()}
</button>

<style>
    .icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--ib-size, 32px);
        height: var(--ib-size, 32px);
        padding: 0;
        background: transparent;
        color: var(--text-muted);
        border: 1px solid transparent;
        cursor: pointer;
    }

    .radius-sm {
        border-radius: var(--radius-sm);
    }

    .radius-md {
        border-radius: var(--radius-md);
    }

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

    .icon-btn.primary {
        background: var(--primary);
        color: var(--primary-contrast);
        border-color: var(--primary);
    }

    .icon-btn.primary:hover:not(:disabled) {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }

    .icon-btn.danger:hover:not(:disabled) {
        color: var(--danger);
        background: var(--surface-elevated);
    }
</style>
