@props([
    /**
     * Heroicon-Name (ohne flux:icon Prefix), z.B. user, archive-box, newspaper.
     * Wird unten via flux:icon gerendert.
     */
    'icon' => 'information-circle',

    /** Titel (fett, dunkel) */
    'title' => '',

    /** Vollständigkeitswert in Prozent (0–100) für die Progress-Bar */
    'percent' => null,

    /** Ziel-URL der Aktion (Pflicht für ein klickbares Hint) */
    'href' => null,

    /** Optionaler Action-Text — wenn null wird `action`-Slot oder „Öffnen“ verwendet */
    'action' => null,

    /** Wenn `true`, wird das Hint als Volt-`wire:navigate`-Link gerendert */
    'navigate' => true,
])

@php
    $percent = $percent !== null ? max(0, min(100, (int) $percent)) : null;
@endphp

<div class="hint-card">
    <span class="hint-ico">
        <flux:icon :name="$icon" class="size-[18px]" />
    </span>

    <div class="min-w-0">
        <div class="flex items-baseline justify-between gap-3">
            <div class="text-[13px] font-semibold leading-tight text-[color:var(--color-ink)]">
                {{ $title }}
            </div>

            @if ($percent !== null)
                <span class="stat-meta whitespace-nowrap flex-shrink-0 text-[10px]">{{ $percent }}&thinsp;%</span>
            @endif
        </div>

        @if ($percent !== null)
            <div class="hint-bar">
                <span style="width: {{ max(2, $percent) }}%;"></span>
            </div>
        @endif

        <p class="text-[11.5px] leading-[1.5] mt-2 m-0 text-[color:var(--color-ink-3)]">
            {{ $slot }}
        </p>

        @if ($href)
            <a
                href="{{ $href }}"
                @if ($navigate) wire:navigate @endif
                class="hint-action"
            >
                {{ $action ?? (isset($actionSlot) ? $actionSlot : __('Öffnen')) }} →
            </a>
        @endif
    </div>
</div>