@props(['href', 'title', 'active' => true, 'title_href' => 'Ir'])

<div class="tw:p-4 tw:max-w-sm" style="display: {{ $active ? 'block' : 'none' }};">
    <div class="tw:flex tw:rounded-lg tw:h-full  tw:bg-[#616773] tw:p-8 tw:flex-col">
        <div class="tw:flex tw:items-center tw:mb-3">
            <div
                class="tw:w-8 tw:h-8 tw:mr-3 tw:inline-flex tw:items-center tw:justify-center tw:rounded-full tw:text-white tw:flex-shrink-0 tw:bg-slate-300">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    class="tw:w-5 tw:h-5" viewBox="0 0 24 24">
                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                </svg>
            </div>
            <h2 class="tw:text-white  tw:text-lg tw:font-medium">{{ $title }}</h2>
        </div>
        <div class="tw:flex tw:flex-col tw:justify-between tw:flex-grow">

            <p class="tw:leading-relaxed tw:text-base tw:text-white">
                {{ $slot }}
            </p>

            <a href="{{ $href }}" role="button"
                class="tw:inline-flex tw:w-10 tw:items-center tw:px-3 tw:py-2 tw:text-sm tw:font-medium tw:text-center tw:bg-slate-700 tw:text-slate-50 tw:rounded-lg">
                {{ $title_href }}
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2" class="tw:w-4 tw:h-4 tw:ml-2" viewBox="0 0 24 24">
                    <path d="M5 12h14M12 5l7 7-7 7"></path>
                </svg>
            </a>
        </div>
    </div>
</div>