@props([
    'href' => null,
    'type' => 'button',
    'variant' => 'primary',
    'icon' => null,
])

@php
    $palette = [
        'primary'   => 'btn-primary',
        'secondary' => 'btn-secondary',
        'outline-secondary' => 'btn-outline-secondary',
        'add' => 'btn-add',
        'add-outline' => 'btn-add-outline',
        'text-blue' => 'btn-text-blue',
        'remove' => 'btn-remove'
    ][$variant] ?? '';
@endphp


@if ($href)
    <a href="{{ $href }}"
       {{ $attributes->merge(['class' => "btn text-parrafo $palette"]) }}>
        @if ($icon)
        <div class="span inline-block">
            <x-dynamic-component :component="'icons.' . $icon" class="w-6 h-6" />
        </div>
        @endif
        <span class="truncate">{{ $slot }}</span>
    </a>
@else
    <button type="{{ $type }}"
            {{ $attributes->merge(['class' => "btn parrafo $palette"]) }}>
        @if ($icon)
        <div class="span text-current inline-block">
            <x-dynamic-component :component="'icons.' . $icon" class="w-6 h-6" />
        </div>
        @endif
        <span class="truncate">{{ $slot }}</span>
    </button>
@endif