<%# locals: path, direction, title %>
<%= link_to path, class: "w-full bg-white hover:bg-gray-50 rounded-xl border border-alpha-black-25 shadow-xs p-4 flex items-center justify-between" do %>
  <% if direction == 'previous' %>
    <div class="w-5 h-5 text-gray-500">
      <%= lucide_icon("arrow-left") %>
    </div>
  <% end %>
  <div class="<%= "flex-grow" if direction == "next" %> <%= "text-right" if direction == "previous" %>">
    <span class="block text-sm text-gray-500"><%= t(".#{direction}") %></span>
    <span class="block text-sm font-medium text-gray-900"><%= title %></span>
  </div>
  <% if direction == 'next' %>
    <div class="w-5 h-5 text-gray-500">
      <%= lucide_icon("arrow-right") %>
    </div>
  <% end %>
<% end %>
