@props(['post' => $post ])
<div class="w-full  row-span-3 rounded sm:border-b sm:pb-2 border-b pb-2 ">
    <a href="{{ route('post', ['slug' => $post->slug , 'category' => $post->categories->first()->slug]) }}"
        class="w-full ">
        <div class="flex flex-col gap-1  ">


            <img class="flex-shrink-0 aspect-video w-full rounded  object-cover"
                src="{{ asset('storage/'.$post->featured_image) }}" alt="">

            <div>
                <div class="h-full flex items-center justify-center">

                    <p class="line-clamp-2 sm:line-clamp-3 font-bold text-lg ">
                        <span class="text-{{isset($category->color) ? $category->color : 'red'}}-600">
                            {{$post->sub_title}} :

                        </span>
                        <span>

                            {{$post->title}}
                        </span>
                    </p>
                </div>
                <div class="flex items-center sm:hidden w-full">
                    <div class="w-full">
                        <p class="text-sm">
                            {{Carbon\Carbon::parse($post->created_at)->toFormattedDayDateString()}}</p>
                    </div>

                    @include('components.social-share-icons', ['post' => $post])
                </div>
            </div>
        </div>
    </a>
</div>