{{--
    Badge Molecule
    Small status indicator with colored background

    Usage:
    @component('emails.molecules.badge', [
        'variant' => 'success',  // success|warning|error|info|neutral
        'colors' => $colors
    ])
        Confirmed
    @endcomponent
--}}
@php
$variant = $variant ?? 'neutral';
$badgeStyles = [
    'success' => ['bg' => $colors['success-50'] ?? '#f0fdf5', 'text' => $colors['success-600'] ?? '#16a34a'],
    'warning' => ['bg' => $colors['warning-50'] ?? '#fefce8', 'text' => $colors['warning-600'] ?? '#ca8a04'],
    'error' => ['bg' => $colors['error-50'] ?? '#fef2f2', 'text' => $colors['error-600'] ?? '#dc2626'],
    'info' => ['bg' => $colors['info-50'] ?? '#eff6ff', 'text' => $colors['info-600'] ?? '#2563eb'],
    'neutral' => ['bg' => $colors['neutral-100'] ?? '#f6f8fa', 'text' => $colors['neutral-700'] ?? '#3c4257'],
];
$style = $badgeStyles[$variant];
@endphp

<span style="display: inline-block; padding: 4px 12px; background-color: {{ $style['bg'] }}; color: {{ $style['text'] }}; font-size: 12px; font-weight: 600; border-radius: 12px; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.5;">{{ $slot }}</span>