@props([
    'type' => 'button',
    'icon' => null,
    'value' => null,
])

@php
    $baseClasses = 'bg-[#FF5733] hover:bg-[#e04d2c] text-white rounded-md shadow-sm transition flex items-center justify-center';

    $sizeClasses = $value
        ? 'p-2 text-xs gap-1'
        : 'p-2 text-sm';
@endphp

<button
    type="{{ $type }}"
    {{ $attributes->merge([
        'class' => "$baseClasses $sizeClasses"
    ]) }}
>
    @if($icon)
        <x-dynamic-component :component="$icon" class="w-4 h-4"/>
    @endif

    @if($value)
        <span>{{ $value }}</span>
    @endif
</button>