@props(['verse', 'hadith' => null, 'link' => true])

<div {{ $attributes->merge(['class' => 'card surface-pattern relative overflow-hidden']) }}>
    <div class="flex items-center justify-between border-b border-outline/60 px-4 py-2.5">
        <span class="flex items-center gap-1.5 text-small font-semibold text-primary">
            <x-icon name="sparkles" class="w-4 h-4"/> Inspirasi Hari Ini
        </span>
        @if($link)<a href="{{ route('inspiration.index') }}" class="text-caption font-semibold text-primary hover:underline">Selengkapnya</a>@endif
    </div>

    <div class="relative p-5">
        {{-- Ayat --}}
        @if(!empty($verse['arabic']))
        <p dir="rtl" class="font-arabic text-2xl leading-loose text-ink text-right">{{ $verse['arabic'] }}</p>
        @endif
        <p class="mt-3 text-body text-muted italic prose-body">"{{ $verse['translation'] ?? '' }}"</p>
        <p class="mt-1.5 text-caption font-semibold text-primary">{{ $verse['ref'] ?? '' }}</p>

        {{-- Hadis --}}
        @if($hadith)
        <div class="mt-5 rounded-xl bg-surface-2 p-4">
            <p class="text-label text-muted mb-1">Hadis Hari Ini</p>
            @if(!empty($hadith['arabic']))
            <p dir="rtl" class="font-arabic text-xl leading-loose text-ink text-right mb-2">{{ $hadith['arabic'] }}</p>
            @endif
            <p class="text-body text-ink">"{{ $hadith['text'] }}"</p>
            <p class="mt-1.5 text-caption font-semibold text-secondary">{{ $hadith['source'] }}</p>
        </div>
        @endif
    </div>
</div>