<%# locals: (name:, path:, icon_key:) %>

<%= link_to path, class: "space-y-1 py-1 group block" do %>
  <div class="grow flex gap-1 items-center">
    <%= tag.div class: class_names("w-1 h-4 rounded-tr-sm rounded-br-sm", "bg-gray-900" => page_active?(path)) %>

    <%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-white shadow-xs text-primary" : "group-hover:bg-gray-100 text-secondary") do %>
      <%= icon(icon_key) %>
    <% end %>
  </div>

  <div class="grow pl-2">
    <%= tag.p class: class_names("text-center font-medium text-[11px]", page_active?(path) ? "text-primary" : "text-secondary") do %>
      <%= name %>
    <% end %>
  </div>
<% end %>
