@props([
    'image' => null,
    'contentType' => null,
    'title' => null,
    'text' => null,
    'url' => '#',
    'buttonText' => null,
    'buttonUrl' => null,
    'onDark' => false,
    'progress' => null,
    'isPlayable' => false,
    'isHorizontal' => false,
])

<div class="flex flex-col {{ $isHorizontal?'':'flex flex-col justify-between' }}">
    <div
        class="group relative grid gap-4 sm:gap-8 {{ $isHorizontal?'grid-cols-1 lg:grid-cols-[150px,1fr]':'' }}">
        @if($image || $progress )
            <div>
                @if($image)
                    <div
                        class="group-hover:scale-105 transition ease-swift-out duration-250 aspect-square bg-grey-200 bg-cover bg-center rounded-sm shadow-md relative bg-grey-250"
                        style="background-image: url({{ $image }})"
                    >
                        @if($isPlayable)
                            <x-cards.hover-play-state class="opacity-0 group-hover:opacity-100" />
                        @endif
                    </div>
                @endif
                @if($progress)
                    <div class="flex items-center gap-1.5 w-full h-3.5">
                        <div
                            role="progressbar"
                            aria-labelledby="Progress"
                            aria-valuenow="{{ $progress }}"
                            class="bg-grey-450 w-full"
                        >
                            <div class="bg-pink h-1.5" style="width: {{ $progress > 100 ? 100 : $progress }}%"></div>
                        </div>
                        @if($progress == 100)
                            <x-icon name="circle-tick" class="text-pink w-auto h-full" />
                        @endif
                    </div>
                @endif
            </div>
        @endif

        <div class="flex flex-col justify-between space-y-4 {{ $onDark ? 'text-white':'text-purple' }}">
            <div class="space-y-4">
                @if($contentType)
                    <h4 class="relative text-pink text-sm font-semibold uppercase">{{ $contentType }}</h4>
                @endif

                @if($title)
                    <a href="{{ $url }}" class="after:absolute after:inset-0">
                        <h3 class="font-bold {{ $isHorizontal?'sm:text-xl':'' }}">{{ str($title)->limit(75) }}</h3>
                    </a>
                @endif

                @if($text)
                    <div class="flex gap-x-2">
                        @if($isPlayable)
                            <x-icon name="play-sm" size="0.8em" class="text-pink flex-none mt-1" />
                        @endif
                        <p class="text-sm {{ $isHorizontal?'sm:text-base':'' }}">{{ str($text)->limit(75) }}</p>
                    </div>
                @endif
            </div>

            {{-- create space for button here --}}
            @if($buttonText && $buttonUrl && $isHorizontal)
                <div class="mt-2 w-full opacity-0" aria-hidden="true">X</div>
            @endif
        </div>
    </div>

    {{-- This needs to be here for horizontal mode translate-y-[-100%] is key here as it moves into the spacer created above --}}
    @if($buttonText && $buttonUrl)
        <div
            class="{{ $isHorizontal?'translate-y-[-100%] grid gap-4 sm:gap-8 grid-cols-1 lg:grid-cols-[150px,1fr]':'' }}"
        >
            <a href="{{ $buttonUrl }}"
               class="lg:col-start-2 mt-2 uppercase btn {{ $onDark ? 'btn-on-dark':'' }} text-grey-450 p-0 inline-block">{{ $buttonText }}</a>
        </div>
    @endif
</div>


{{--
EXAMPLE:

// IS HORIZONTAL EXAMPLE
<div class="mx-auto max-w-xl lg:max-w-full grid grid-cols-2 gap-6 sm:gap-10 sm:gap-y-16">
    <x-cards.feature-card
        :is-horizontal="true"
        :image="fake()->imageUrl"
        :title="fake()->sentence"
        :text="fake()->sentence"
        :button-url="'#'"
        button-text="Read more"
    ></x-cards.feature-card>

    <x-cards.feature-card
        :is-horizontal="true"
        :image="fake()->imageUrl"
        :title="fake()->sentence"
        :text="fake()->sentence"
        :button-url="'#'"
        button-text="Read more"
    ></x-cards.feature-card>
</div>


<div class="container-1 py-10">
    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 md:gap-6 lg:gap-8">
        <x-cards.feature-card
            :image="fake()->imageUrl"
            content-type="Content type"
            :title="fake()->sentence"
            :text="fake()->sentence"
            :button-url="'#'"
            button-text="All Episodes"
            :progress="100"
        ></x-cards.feature-card>

        <x-cards.feature-card
            :image="fake()->imageUrl"
            content-type="Content type"
            :title="fake()->sentence"
            :text="fake()->sentence"
            :button-url="'#'"
            button-text="All Episodes"
            :progress="60"
        ></x-cards.feature-card>
    </div>
</div>

--}}