@props([
    'href' => '#',
    'image' => null,
    'title' => '',
    'subtitle' => null,
    'locked' => false,
    'ratio' => '16x9', // 16x9 | 2x3
    'badge' => null,
    'progress' => null, // 0-100
    'duration' => null, // detik
])

<a href="{{ $href }}" {{ $attributes->class([
        'poster group',
        'poster-2x3' => $ratio === '2x3',
        'poster-16x9' => $ratio !== '2x3',
    ]) }}>
    @if($image)
        <img src="{{ $image }}" alt="{{ $title }}" loading="lazy"
             class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
    @else
        <div class="flex h-full w-full items-center justify-center bg-qr-surface2">
            <x-icon name="film" class="w-8 h-8 text-qr-muted"/>
        </div>
    @endif

    {{-- gradient overlay --}}
    <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/10 to-transparent"></div>

    @if($badge)
        <span class="absolute left-2 top-2 rounded-md bg-qr-gold/90 px-1.5 py-0.5 text-[10px] font-bold text-black">{{ $badge }}</span>
    @endif

    @if($locked)
        <span class="absolute right-2 top-2 grid h-6 w-6 place-items-center rounded-full bg-black/60 backdrop-blur">
            <x-icon name="lock" class="w-3.5 h-3.5 text-qr-gold"/>
        </span>
    @else
        <span class="absolute right-2 top-2 grid h-6 w-6 place-items-center rounded-full bg-black/40 opacity-0 transition group-hover:opacity-100">
            <x-icon name="play" class="w-3.5 h-3.5 text-white"/>
        </span>
    @endif

    @if($duration)
        <span class="absolute bottom-2 left-2 rounded bg-black/70 px-1.5 py-0.5 text-[10px] font-semibold text-white">{{ gmdate($duration >= 3600 ? 'H:i:s' : 'i:s', $duration) }}</span>
    @endif

    <div class="absolute inset-x-0 bottom-0 p-2.5 {{ $duration ? 'pb-7' : '' }}">
        <p class="line-clamp-2 text-[13px] font-semibold leading-tight text-white drop-shadow">{{ $title }}</p>
        @if($subtitle)<p class="mt-0.5 text-[11px] text-white/70 line-clamp-1">{{ $subtitle }}</p>@endif
    </div>

    @if(!is_null($progress))
        <div class="absolute inset-x-0 bottom-0 h-1 bg-white/20">
            <div class="h-full bg-qr-accent" style="width: {{ max(2,min(100,$progress)) }}%"></div>
        </div>
    @endif
</a>