@props([
  'title' => '',
])
<div class="self-start">
  <nav aria-label="Breadcrumb">
    <ol class="flex items-center text-sm">
      <li>
        <a href="{{ route('pool-school.index') }}"
          class="text-primary hover:text-primary/80 flex items-center gap-2 whitespace-nowrap transition-colors duration-200">
          <img class="h-7 w-7" src="{{ asset('favicon/favicon-white-bg.png') }}" alt="Apex Icon">
          <span>Pool School</span>
        </a>
      </li>
      <li class="text-primary flex items-center">
        <i class="fa-solid fa-chevron-right !flex h-7 w-7 !items-center !justify-center text-xs"></i>
        <span class="text-gray-500">{{ $title }}</span>
      </li>
    </ol>
  </nav>
</div>