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

@php
    $base = 'inline-flex min-w-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg text-center font-bold transition focus:outline-none focus:ring-4 disabled:pointer-events-none disabled:opacity-60 [&>span]:min-w-0 [&>span]:truncate';

    $variants = [
        'primary' => 'bg-booklio-primary text-white shadow-card shadow-blue-500/20 hover:bg-blue-700 focus:ring-blue-100',
        'secondary' => 'border border-booklio-border bg-white text-booklio-dark shadow-soft hover:bg-slate-50 focus:ring-slate-100',
        'outline' => 'border border-blue-200 bg-white text-booklio-primary hover:bg-blue-50 focus:ring-blue-100',
        'danger' => 'border border-red-200 bg-white text-booklio-danger hover:bg-red-50 focus:ring-red-100',
        'ghost' => 'bg-transparent text-booklio-primary hover:bg-blue-50 focus:ring-blue-100',
    ];

    $sizes = [
        'sm' => 'h-9 px-4 text-xs',
        'md' => 'h-11 px-5 text-sm',
        'lg' => 'h-12 px-6 text-sm',
        'icon' => 'h-10 w-10 p-0',
    ];

    $classes = trim($base . ' ' . ($variants[$variant] ?? $variants['primary']) . ' ' . ($sizes[$size] ?? $sizes['md']));
@endphp

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