<script>
    import './Button.css'
    import { isInternalPath, navigateTo } from '../../lib/navigation'

    let {
        color = 'var(--primary-color)',
        text = 'Button',
        textColor = '#fff',
        round = '5px',
        padding = '10px 20px',
        margin = '0',
        href = null,
        borderWidth = '0px',
        borderColor = 'var(--primary-color)',
        fullWidth = false,
        ...restProps
    } = $props()

    function handleClick(event) {
        if (!href || !isInternalPath(href)) return
        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return

        event.preventDefault()
        navigateTo(href)
    }
</script>

{#if href}
    <a
        class="button"
        class:full-width={fullWidth}
        style={`--button-color: ${color}; --button-text-color: ${textColor}; --button-radius: ${round}; --button-padding: ${padding}; --button-border-width: ${borderWidth}; --button-border-color: ${borderColor}; --button-margin: ${margin};`}
        {href}
        onclick={handleClick}
        {...restProps}
    >
        {text}
    </a>
{:else}
    <button
        class="button"
        class:full-width={fullWidth}
        style={`--button-color: ${color}; --button-text-color: ${textColor}; --button-radius: ${round}; --button-padding: ${padding}; --button-border-width: ${borderWidth}; --button-border-color: ${borderColor}; --button-margin: ${margin};`}
        {...restProps}
    >
        {text}
    </button>
{/if}