@props([
  'title',
  'back' => false,
])

<div class="flex items-center justify-between h-11 mb-2">
  @if ($back)
    <button
      type="button"
      onclick="window.WeShareNav?.back?.('/')"
      class="tap-target w-9 h-9 -ml-1 rounded-full flex items-center justify-center"
      aria-label="Back"
    >
      <x-lucide-arrow-left class="w-[22px] h-[22px] text-primary" />
    </button>
  @else
    <div class="w-9"></div>
  @endif

  <h1 class="text-[17px] font-semibold text-foreground">{{ $title }}</h1>

  <div class="w-9">
    {{ $right ?? '' }}
  </div>
</div>