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

@php
    $baseClasses = 'inline-flex items-center justify-center rounded-md font-semibold transition-colors duration-200 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';

    $sizeClasses = [
        'xs' => 'px-2.5 py-1 text-xs gap-1',
        'sm' => 'px-3 py-1.5 text-sm gap-1.5',
        'md' => 'px-4 py-2 text-sm gap-2',
        'lg' => 'px-5 py-3 text-base gap-2',
    ];

    $colorClasses = [
        'primary' => 'bg-[#5f7f6e] text-white hover:bg-[#4d6659] focus-visible:ring-[#4d6659]',
        'secondary' => 'bg-[#5e6e78] text-white hover:bg-[#4c5961] focus-visible:ring-[#4c5961]',
        'neutral' => 'border border-zinc-300 bg-white text-zinc-700 hover:bg-[#E6EFEA] focus-visible:ring-zinc-400',
        'warning' => 'bg-amber-500 text-white hover:bg-amber-400 focus-visible:ring-amber-500/70',
        'danger' => 'bg-[#C46A4A] text-white hover:bg-[#a5543a] focus-visible:ring-[#a5543a]',
    ];

    $resolvedSize = $sizeClasses[$size] ?? $sizeClasses['md'];
    $resolvedColor = $colorClasses[$color] ?? $colorClasses['primary'];
    $classes = trim("$baseClasses $resolvedSize $resolvedColor");

    $finalAttributes = $attributes->merge(['class' => $classes]);
@endphp

@if($tag === 'a')
    <a {{ $finalAttributes->merge(['href' => $href]) }}>
        {{ $slot }}
    </a>
@else
    <button type="{{ $type }}" {{ $finalAttributes }}>
        {{ $slot }}
    </button>
@endif