@props(['variant' => 'default'])

@php
    $baseClass =
        'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2';

    $variants = [
        'default' => 'border-transparent bg-slate-900 text-slate-50 hover:bg-slate-900/80',
        'secondary' => 'border-transparent bg-slate-100 text-slate-900 hover:bg-slate-100/80',
        'destructive' => 'border-transparent bg-red-500 text-slate-50 hover:bg-red-500/80',
        'outline' => 'text-slate-950',
        // Custom status variants
        'success' => 'border-transparent bg-green-100 text-green-900 hover:bg-green-200',
        'warning' => 'border-transparent bg-yellow-100 text-yellow-900 hover:bg-yellow-200',
        'info' => 'border-transparent bg-blue-100 text-blue-900 hover:bg-blue-200',
        'indigo' => 'border-transparent bg-indigo-100 text-indigo-900 hover:bg-indigo-200',
    ];

    $classes = $baseClass . ' ' . ($variants[$variant] ?? $variants['default']);
@endphp

<div {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</div>