<style lang="scss" src="./ButtonCircle.scss"></style>

<script lang="ts">
    import { cx } from 'classix'

    let {
        tag = 'button',
        url,
        color,
        size,
        type,
        clone = false,
        disabled,
        label,
        children,
        onclick,
        ...props
    }: {
        tag?: string
        url?: string
        color?: string
        size?: string
        type?: 'button' | 'reset' | 'submit'
        clone?: boolean
        disabled?: boolean
        label?: string
        children?: any
        onclick?: any
        class?: string
    } = $props()

    const buttonClass = 'button-circle'
    const classes = $derived(cx(
        buttonClass,
        ...[color, size].map(variant => variant && `${buttonClass}--${variant}`),
        clone ? 'has-clone' : null,
        props.class,
    ))
</script>

{#snippet content()}
    {#if clone}
        {#each Array(2) as _}
            {@render children()}
        {/each}
    {:else}
        {@render children()}
    {/if}
{/snippet}


{#if tag === 'a'}
    <a href={url} class={classes} tabindex="0" aria-label={label} {onclick}>
        {@render content()}
    </a>
{:else}
    <button {type} class={classes} disabled={disabled} tabindex="0" aria-label={label} {onclick}>
        {@render content()}
    </button>
{/if}
