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

@php
    // Check if current route is active
    $isActive = false;
    if ($href) {
        // Get the path from both URLs (handles both relative and absolute URLs)
        $currentPath = rtrim(parse_url(request()->url(), PHP_URL_PATH) ?: '/', '/');
        $hrefPath = rtrim(parse_url($href, PHP_URL_PATH) ?: '/', '/');
        
        // Normalize empty paths to root
        $currentPath = $currentPath ?: '/';
        $hrefPath = $hrefPath ?: '/';
        
        // Only match exact paths to avoid parent routes being active on child routes
        $isActive = $currentPath === $hrefPath;
    }

    $baseClasses = 'flex flex-row items-center font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed';

    $variantClasses = [
        'outline' => $isActive 
            ? 'bg-blue-50 border-2 border-blue-500 text-blue-700 hover:border-blue-600 hover:bg-blue-100 focus:ring-blue-500' 
            : 'bg-transparent border-2 border-slate-300 text-slate-700 hover:border-slate-400 hover:bg-slate-50 focus:ring-slate-500',
        'ghost' => $isActive 
            ? 'bg-blue-50 text-blue-700 hover:bg-blue-100 focus:ring-blue-500' 
            : 'bg-transparent text-slate-600 hover:bg-slate-100 focus:ring-slate-500',
    ];

    $sizeClasses = [
        'sm' => 'text-sm rounded-md',
        'md' => 'text-base rounded-lg',
        'lg' => 'text-lg rounded-lg'
    ];

    $innerSizeClasses = [
        'sm' => 'px-2 py-1.5',
        'md' => 'px-3 py-2',
        'lg' => 'px-4 py-3'
    ];

    $classes = $baseClasses . ' ' . $variantClasses[$variant] . ' ' . $sizeClasses[$size];
    $innerClasses = $innerSizeClasses[$size];
@endphp


@if($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
        <x-dynamic-component
            :component="'icon.' . $icon"
            class="w-4 h-4"
        />

        <div {{ $attributes->except('class')->merge(['class' => $innerClasses]) }}>
            {{ $slot }}
        </div>
    </a>
@else
    <button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
        <x-dynamic-component
            :component="'icon.' . $icon"
            class="w-4 h-4"
        />

        <div {{ $attributes->except('class')->merge(['class' => $innerClasses]) }}>
            {{ $slot }}
        </div>
    </button>
@endif