@props(['title' => 'Pro Tips', 'tips' => []])

<section class="rounded-xl bg-blue-50 p-6 md:p-10 shadow-sm ring-1 ring-blue-100">
  <h3 class="mb-3 text-2xl font-bold text-blue-900">
    <i class="fa-solid fa-lines-leaning"></i>
    {{ $title }}
  </h3>

  @if (count($tips) > 0)
    <ul class="grid list-disc grid-cols-1 gap-x-8 gap-y-4 pl-5 text-lg leading-relaxed text-blue-900 md:grid-cols-2">
      @foreach ($tips as $tip)
        <li>
          @if (isset($tip['label']) && isset($tip['description']))
            <strong>{{ $tip['label'] }}:</strong> {{ $tip['description'] }}
          @else
            {!! $tip !!}
          @endif
        </li>
      @endforeach
    </ul>
  @else
    {{ $slot }}
  @endif
</section>