{{-- 
Secondary Button Component
Usage:
<x-ui.buttons.secondary>Cancel</x-ui.buttons.secondary>
<x-ui.buttons.secondary size="sm">Small Button</x-ui.buttons.secondary>
<x-ui.buttons.secondary size="lg">Large Button</x-ui.buttons.secondary>
<x-ui.buttons.secondary disabled>Disabled Button</x-ui.buttons.secondary>
<x-ui.buttons.secondary href="/some/path">Link Button</x-ui.buttons.secondary>
--}}

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

@php
    // Using semantic color tokens for secondary action
    $baseClasses = 'inline-flex items-center justify-center border border-neutral-300 rounded-md font-medium text-neutral-700 bg-white hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200 ease-in-out dark:bg-neutral-800 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:ring-primary-400 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

@if ($href)
    <a href="{{ $href }}" {{ $attributes->except(['type'])->merge(['class' => $classes]) }}>
        {{ $slot }}
    </a>
@else
    <button {{ $attributes->merge(['type' => $type, 'class' => $classes]) }}>
        {{ $slot }}
    </button>
@endif