<script>
    import './Button.css'

    export let color = 'var(--primary-color)'
    export let text = 'Button'
    export let textColor = '#fff'
    export let round = '8px'
    export let padding = '8px 24px'
    export let href = null
    export let borderWidth = '0px'
</script>

{#if href}
    <a
        class="button"
        style={`--button-color: ${color}; --button-text-color: ${textColor}; --button-radius: ${round}; --button-padding: ${padding}; --button-border-width: ${borderWidth};`}
        {href}
    >
        {text}
    </a>
{:else}
    <button
        class="button"
        style={`--button-color: ${color}; --button-text-color: ${textColor}; --button-radius: ${round}; --button-padding: ${padding}; --button-border-width: ${borderWidth};`}
    >
        {text}
    </button>
{/if}