@props([
    'title' => null,
    'icon' => null,
    'subtitle' => null,
    'hover' => false,
    'compact' => false,
])

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

    @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 text-nowrap text-ellipsis">
                    @if($title)
                        <div class="fluent-card__title">
                            {{ $title }}
                        </div>
                    @endif

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

            </div>

        </div>
    @endif
    @isset($body)
        <div class="fluent-card__body">
            {{ $body }}
        </div>
    @endif

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

</div>