@props([
    'desktopSchedule' => 'Pre-register',
    'desktopCheckIn' => 'Check in visitor',
    'scheduleLabel' => 'Pre-register visitor',
    'checkInLabel' => 'Check in visitor',
])

<div {{ $attributes->merge(['class' => 'flex shrink-0 items-center gap-2']) }}>
  <a href="{{ route('frontdesk.visits.schedule') }}"
     aria-label="{{ $scheduleLabel }}"
     title="{{ $scheduleLabel }}"
     class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 lg:hidden">
    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
    </svg>
  </a>
  <a href="{{ route('frontdesk.visits.create') }}"
     aria-label="{{ $checkInLabel }}"
     title="{{ $checkInLabel }}"
     class="btn-fab h-10 w-10 lg:hidden">
    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
    </svg>
  </a>
  <a href="{{ route('frontdesk.visits.schedule') }}"
     class="hidden items-center rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 lg:inline-flex">
    {{ $desktopSchedule }}
  </a>
  <a href="{{ route('frontdesk.visits.create') }}"
     class="btn-primary hidden whitespace-nowrap lg:inline-flex">
    {{ $desktopCheckIn }}
  </a>
</div>