@props([
    'type' => 'general',
    'showLabel' => false,
    'badge' => false,
    'size' => 'md', // sm, md, lg, xl
    'label' => null,
    'tooltip' => false,
    'clickable' => false,
])

@php
    // Map type to icon and color
    $typeConfig = [
        'general' => ['icon' => '📰', 'color' => 'primary', 'bg' => 'bg-primary', 'text' => __('labels.new_types.general')],
        'security_alert' => ['icon' => '🚨', 'color' => 'danger', 'bg' => 'bg-danger', 'text' => __('labels.new_types.security_alert')],
        'market_trend' => ['icon' => '📈', 'color' => 'success', 'bg' => 'bg-success', 'text' => __('labels.new_types.market_trend')],
        'claims_update' => ['icon' => '📄', 'color' => 'info', 'bg' => 'bg-info', 'text' => __('labels.new_types.claims_update')],
        'legal_update' => ['icon' => '⚖️', 'color' => 'warning', 'bg' => 'bg-warning', 'text' => __('labels.new_types.legal_update')],
        'technical_update' => ['icon' => '🛠️', 'color' => 'secondary', 'bg' => 'bg-secondary', 'text' => __('labels.new_types.technical_update')],
        'guidance' => ['icon' => '📖', 'color' => 'info', 'bg' => 'bg-info', 'text' => __('labels.new_types.guidance')],
        'event' => ['icon' => '📅', 'color' => 'primary', 'bg' => 'bg-primary', 'text' => __('labels.new_types.event')],
        'announcement' => ['icon' => '📢', 'color' => 'warning', 'bg' => 'bg-warning', 'text' => 'Announcement'],
        'update' => ['icon' => '🔄', 'color' => 'success', 'bg' => 'bg-success', 'text' => 'Update'],
        'other' => ['icon' => '📋', 'color' => 'secondary', 'bg' => 'bg-secondary', 'text' => 'Other'],
    ];

    $config = $typeConfig[$type] ?? $typeConfig['general'];
    $labelText = $label ?: $config['text'];
    
    // Size mapping
    $sizeMap = [
        'sm' => ['icon' => 'fs-6', 'badge' => 'py-1 px-2', 'text' => 'small'],
        'md' => ['icon' => 'fs-4', 'badge' => 'py-1 px-3', 'text' => ''],
        'lg' => ['icon' => 'fs-2', 'badge' => 'py-2 px-4', 'text' => 'h5'],
        'xl' => ['icon' => 'fs-1', 'badge' => 'py-3 px-5', 'text' => 'h4'],
    ];
    
    $sizeConfig = $sizeMap[$size] ?? $sizeMap['md'];
    
    // Build CSS classes
    $iconClasses = "type-icon {$sizeConfig['icon']}";
    $textClasses = "type-label {$sizeConfig['text']}";
    $badgeClasses = "badge {$config['bg']} {$sizeConfig['badge']} d-inline-flex align-items-center gap-2";
    
    // Clickable styles
    if ($clickable) {
        $badgeClasses .= ' cursor-pointer';
        if (!$badge) {
            $iconClasses .= ' cursor-pointer';
        }
    }
@endphp

@if($badge)
    <span 
        {{ $attributes->merge(['class' => $badgeClasses]) }}
        @if($tooltip) data-bs-toggle="tooltip" title="{{ $labelText }}" @endif
    >
        <span class="{{ $iconClasses }}">{{ $config['icon'] }}</span>
        @if($showLabel)
            <span class="{{ $textClasses }}">{{ $labelText }}</span>
        @endif
    </span>
@else
    <span 
        {{ $attributes->merge(['class' => 'd-inline-flex align-items-center gap-2']) }}
        @if($tooltip) data-bs-toggle="tooltip" title="{{ $labelText }}" @endif
    >
        <span class="{{ $iconClasses }}" @if($tooltip && !$badge) data-bs-toggle="tooltip" title="{{ $labelText }}" @endif>
            {{ $config['icon'] }}
        </span>
        @if($showLabel)
            <span class="{{ $textClasses }}">{{ $labelText }}</span>
        @endif
    </span>
@endif

@once
<style>
    .type-icon {
        display: inline-block;
        font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
        line-height: 1;
        transition: transform 0.2s ease;
    }
    
    .cursor-pointer {
        cursor: pointer;
    }
    
    .cursor-pointer:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }
    
    .badge .type-icon {
        margin-bottom: 1px;
    }
</style>
@endonce