@props([
    'image',
    'alt',
    'title',
    'description',
    'learningPoints' => [],
    'duration',
    'url' => null, // Add url prop, default to null
    'classImage' => '', // Add classImage prop, default to empty string
])

<div class="flex flex-col gap-4 rounded border border-gray-200 bg-white py-6 shadow-sm">
  <div class="px-6">
    <img src="{{ asset($image) }}" alt="{{ $alt }}" class="h-48 w-full rounded object-cover {{ $classImage }}">
  </div>
  <div class="flex-1 flex flex-col">
    <div class="px-6">
      <h3 class="mb-3 text-xl font-semibold text-blue-900">{{ $title }}</h3>
      <p class="mb-4 text-gray-700">{{ $description }}</p>

      @if (count($learningPoints) > 0)
        <div class="mb-4">
          <h4 class="mb-2 font-semibold text-gray-800">What You'll Learn:</h4>
          <ul class="list-disc space-y-1 pl-5 text-sm text-gray-600">
            @foreach ($learningPoints as $point)
              <li>{{ $point }}</li>
            @endforeach
          </ul>
        </div>
      @endif
    </div>

    <div class="flex items-center justify-between mt-auto border-t border-gray-200 pt-6 px-6">
      <span class="text-sm text-gray-500">Duration: {{ $duration }}</span>
      @if ($url)
        <a href="{{ $url }}" class="btn btn-primary">
          Learn More
        </a>
      @else
        <button class="btn btn-primary cursor-not-allowed" disabled>
          Coming Soon
        </button>
      @endif
    </div>
  </div>
</div>