{{-- 
Danger Button Component
Usage:
<x-ui.buttons.danger>Delete</x-ui.buttons.danger>
<x-ui.buttons.danger size="sm">Small Button</x-ui.buttons.danger>
<x-ui.buttons.danger size="lg">Large Button</x-ui.buttons.danger>
<x-ui.buttons.danger disabled>Disabled Button</x-ui.buttons.danger>
--}}

@props([
    'type' => 'button',
    'size' => 'md',
])

@php
    $baseClasses = 'inline-flex items-center justify-center border border-transparent rounded-md font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 ease-in-out dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-600 disabled:opacity-50 disabled:cursor-not-allowed';
    
    $sizes = [
        'sm' => 'px-3 py-1.5 text-xs',
        'md' => 'px-4 py-2 text-sm',
        'lg' => 'px-5 py-2.5 text-base'
    ];
    
    $sizeClasses = $sizes[$size] ?? $sizes['md'];
    
    $classes = $baseClasses . ' ' . $sizeClasses;
@endphp

<button {{ $attributes->merge(['type' => $type, 'class' => $classes]) }}>
    {{ $slot }}
</button>