@props([
    'previousClass' => null,
    'nextClass' => null,
])

<div class="flex flex-col gap-4 md:flex-row md:justify-between">
  {{-- Previous Class --}}
  @if ($previousClass)
    <a href="{{ $previousClass['url'] }}"
      class="group flex flex-1 items-center gap-4 border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-primary/30 hover:shadow-md">
      <div class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 group-hover:bg-primary/10">
        <i class="fa-solid fa-chevron-left text-gray-600 group-hover:text-primary"></i>
      </div>
      <div class="flex-1">
        <p class="text-sm text-gray-500">Previous Class</p>
        <h3 class="font-semibold text-gray-900 group-hover:text-primary">{{ $previousClass['title'] }}</h3>
        <p class="text-sm text-gray-600">{{ $previousClass['duration'] }}</p>
      </div>
    </a>
  @else
    <div class="flex-1"></div>
  @endif

  {{-- Next Class --}}
  @if ($nextClass)
    <a href="{{ $nextClass['url'] }}"
      class="group flex flex-1 items-center gap-4 border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-primary/30 hover:shadow-md md:flex-row-reverse">
      <div class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 group-hover:bg-primary/10">
        <i class="fa-solid fa-chevron-right text-gray-600 group-hover:text-primary"></i>
      </div>
      <div class="flex-1 md:text-right">
        <p class="text-sm text-gray-500">Next Class</p>
        <h3 class="font-semibold text-gray-900 group-hover:text-primary">{{ $nextClass['title'] }}</h3>
        <p class="text-sm text-gray-600">{{ $nextClass['duration'] }}</p>
      </div>
    </a>
  @else
    <div class="flex-1"></div>
  @endif
</div>