@props([
    'color' => 'primary'])
    @php
        $text_color = ($color == 'secondary' ? "text-slate-600" : "text-white");
        $base_class = "transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-".$color." focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed ".$text_color." bg-".$color." border-".$color."  dark:border-".$color;
    @endphp
<button {{ $attributes->merge(['type' => 'submit', 'class' => $base_class]) }}>
    {{ $slot }} 
</button>