{{-- A figure and what it counts: "1,204 · Shares", "3.2 GB · Stored".

     Not an M3 component; drawn in M3's terms — a panel in surface-container that separates from
     the page by tone, a label-large `title`, the `value` as the card's hero in an emphasized
     headline with tabular figures, and a body-small `description`. The value counts up once on
     first appearance and again when it changes (`x-figure`), and rests under reduced motion.
     `icon` sits beside the title. The slot, if any, goes under the description — a progress bar
     for a quota. --}}

@props([
    'title' => null,
    'value' => null,
    'description' => null,
    'icon' => null,
])

<div {{ $attributes->class('flex flex-col gap-1 rounded-corner-lg bg-surface-container p-4') }}>
    <div class="flex items-center gap-2 type-label-lg text-on-surface-variant">
        @if ($icon)
            <x-livewire-material::icon :name="$icon" class="size-5" />
        @endif
        <span>{{ $title }}</span>
    </div>

    <p class="type-emphasized-headline-md tabular-nums" x-data x-figure>{{ $value }}</p>

    @if ($description)
        <p class="type-body-sm text-on-surface-variant">{{ $description }}</p>
    @endif

    @if ($slot->isNotEmpty())
        <div class="pt-2">{{ $slot }}</div>
    @endif
</div>