{{-- 
Primary Button Component
Usage:
<x-ui.buttons.primary>Submit</x-ui.buttons.primary>
<x-ui.buttons.primary size="sm">Small Button</x-ui.buttons.primary>
<x-ui.buttons.primary size="lg">Large Button</x-ui.buttons.primary>
<x-ui.buttons.primary disabled>Disabled Button</x-ui.buttons.primary>
<x-ui.buttons.primary href="/some/path">Link Button</x-ui.buttons.primary>
--}}
@props([
    'type' => 'button',
    'size' => 'md',
    'href' => null,
])
@php
    // Using semantic color tokens for primary action
    $baseClasses = 'inline-flex items-center justify-center border border-transparent rounded-md font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200 ease-in-out dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed';
    
    $sizes = [
        'sm' => 'px-3 py-2 text-sm min-h-[36px]',
        'md' => 'px-4 py-2.5 text-sm min-h-[44px]',
        'lg' => 'px-5 py-3 text-base min-h-[48px]'
    ];
    
    $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