@props([
  'href' => null,
  'disabled' => false,
  'leftClass' => 'w-11 h-11 rounded-[14px] bg-secondary flex items-center justify-center shrink-0',
  'right' => null,
  'showChevron' => true,
])

@php
  $tag = ($href && ! $disabled) ? 'a' : 'button';
  $base = 'w-full apple-card flex flex-row items-center gap-3.5 px-4 py-[14px] text-left active:scale-[0.98] transition-transform duration-150';
  $attrs = $attributes->merge(['class' => $base]);
@endphp

@if ($tag === 'a')
  <a href="{{ $href }}" {{ $attrs }}>
    <div class="flex items-center gap-2.5 min-w-0 flex-1">
      <div class="{{ $leftClass }}">
        {{ $left }}
      </div>
      <div class="flex-1 min-w-0">
        {{ $slot }}
      </div>
      @if ($showChevron)
        <x-lucide-chevron-right class="w-4 h-4 text-muted-foreground/50 shrink-0 self-center" />
      @endif
    </div>

    @if (isset($right))
      <div class="text-right flex items-center gap-1.5 shrink-0">
        {{ $right }}
      </div>
    @endif
  </a>
@else
  <button type="button" @disabled($disabled) {{ $attrs }}>
    <div class="flex items-center gap-2.5 min-w-0 flex-1">
      <div class="{{ $leftClass }}">
        {{ $left }}
      </div>
      <div class="flex-1 min-w-0">
        {{ $slot }}
      </div>
      @if ($showChevron)
        <x-lucide-chevron-right class="w-4 h-4 text-muted-foreground/50 shrink-0 self-center" />
      @endif
    </div>

    @if (isset($right))
      <div class="text-right flex items-center gap-1.5 shrink-0">
        {{ $right }}
      </div>
    @endif
  </button>
@endif