@props(['picture', 'title', 'description', 'publishedDate', 'slug'])


<a
    class="flex flex-col w-full min-w-[14rem] min-h-[14rem] rounded-lg overflow-hidden border cursor-pointer group pointer-events-auto"
    href="{{ route('landing.news') . "/$slug" }}"
>
    <x-box class="w-full max-h-[12rem] overflow-hidden relative">

        <x-box
            class="absolute inset-0 bg-black bg-opacity-30 opacity-0 group-hover:opacity-100 transition-opacity z-[1]"
        >
            <x-text class="w-full h-full text-white text-center font-bold p-3 align-middle">
                Baca {{ $title }}
            </x-text>
        </x-box>

        <x-image
            class="w-full h-full object-cover group-hover:scale-110 transition-transform z-0"
            :src="$picture"
        />

    </x-box>

    <x-stack class="p-3 select-none">
        <x-text class="font-bold group-hover:text-tertiary-100 font-poppins text-lg text-wrap">
            {{ $title }}
        </x-text>
        <x-text class="text-sm line-clamp-3">
            {!! $description !!}
        </x-text>
        <x-group class="pt-3 gap-1">
            <i class="ph-bold ph-clock"></i>
            <x-text class="text-sm font-bold">
                {{ $publishedDate }}
            </x-text>
        </x-group>
        <x-box
            class="bg-tertiary-100 group-hover:bg-tertiary-200 px-2 py-1 rounded text-white font-semibold text-sm mt-3"
        >
            Baca Selengkapnya &rarr;
        </x-box>
    </x-stack>

</a>