@props([
    'title',
    'bgColor',
    'href',
    'price',
    'discount'
])

<div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105 flex flex-col h-full">
    <div class="{{ $bgColor }} text-white p-4 flex items-center">
        <div class="h-6 w-6 mr-2">
            {{ $icon }}
        </div>
        <h3 class="text-xl font-semibold">{{ $title }}</h3>
    </div>
    <div class="p-6 flex-grow">
        <ul class="list-disc list-inside mb-4 text-sm text-gray-600">
            {{ $slot }}
        </ul>
    </div>
    <div class="p-6 bg-gray-50">
        <div class="flex justify-between items-center mb-4">
            <span class="text-lg font-semibold text-gray-800">From ${{ $price }}/month</span>
            <span class="text-sm text-gray-500">Save up to {{ $discount }}%</span>
        </div>
        <Link href="{{ $href }}" class="block w-full text-center {{ $bgColor }} text-white py-2 rounded-md hover:{{ str_replace('500', '600', $bgColor) }} transition duration-300">
            {{ $attributes->get('button-text', 'Learn More') }}
        </Link>
    </div>
</div>