@props([
    'title' => null,
    'icon' => null,
    'subtitle' => null,
    'value' => null,
    'trend' => null,
    'trendDirection' => null,
    'hover' => false,
    'compact' => false,
    'variant' => 'default',
])

<div 
    {{ $attributes->merge([
        'class' => 'fluent-card ' .
            ($variant === 'kpi' ? 'fluent-card--kpi ' : '') .
            ($hover ? 'fluent-card--hover ' : '') .
            ($compact ? 'fluent-card--compact ' : '')
    ]) }}
>

    {{-- =========================
        KPI MODE
    ========================= --}}
    @if($variant === 'kpi')
        <div class="fluent-card__kpi">

            <div class="fluent-card__kpi-left">
                
                @if($title)
                    <div class="fluent-card__kpi-label">
                        {{ $title }}
                    </div>
                @endif

                @if($value !== null)
                    <div class="fluent-card__kpi-value">
                        {{ is_numeric($value) ? number_format($value) : $value }}
                    </div>
                @endif

                @if($subtitle)
                    <div class="fluent-card__kpi-sub text-nowrap text-ellipsis">
                        {{ $subtitle }}
                    </div>
                @endif

                @if($trend)
                    <div class="fluent-card__kpi-trend {{ $trendDirection }}">
                        
                        <span class="fluent-card__kpi-trend-icon">
                            @if($trendDirection === 'up')
                                ↑
                            @elseif($trendDirection === 'down')
                                ↓
                            @else
                                →
                            @endif
                        </span>

                        <span class="fluent-card__kpi-trend-value">
                            {{ $trend }}
                        </span>

                    </div>
                @endif

            </div>

            @if($icon)
                <div class="fluent-card__kpi-icon">
                    <x-fluent-icon :name="$icon" size="lg" />
                </div>
            @endif

        </div>
    @else

        {{-- =========================
            DEFAULT MODE (EXISTING)
        ========================= --}}
        @if($title || $subtitle || $icon)
            <div class="fluent-card__header">

                <div class="fluent-card__header-inner">

                    @if($icon)
                        <div class="fluent-card__icon">
                            <x-fluent-icon :name="$icon" size="md" />
                        </div>
                    @endif

                    <div class="fluent-card__header-content">
                        @if($title)
                            <div class="fluent-card__title">
                                {{ $title }}
                            </div>
                        @endif

                        @if($subtitle)
                            <div class="fluent-card__subtitle">
                                {{ $subtitle }}
                            </div>
                        @endif
                    </div>

                </div>

            </div>
        @endif

        <div class="fluent-card__body">
            {{ $slot }}
        </div>

        @isset($footer)
            <div class="fluent-card__footer">
                {{ $footer }}
            </div>
        @endisset

    @endif

</div>