<%# locals: (import:) %>

<% steps = [
  { name: "Upload", path: import_upload_path(import), is_complete: import.uploaded?, step_number: 1 },
  { name: "Configure", path: import_configuration_path(import), is_complete: import.configured?, step_number: 2 },
  { name: "Clean", path: import_clean_path(import), is_complete: import.cleaned?, step_number: 3 },
  { name: "Map", path: import_confirm_path(import), is_complete: import.publishable?, step_number: 4 },
  { name: "Confirm", path: import_path(import), is_complete: import.complete?, step_number: 5 }
] %>

<ul class="flex items-center gap-2">
  <% steps.each_with_index do |step, idx| %>
    <li class="flex items-center gap-2 group">
      <% is_current = request.path == step[:path] %>

      <% text_class = if is_current
                  "text-gray-900"
                else
                  step[:is_complete] ? "text-green-600" : "text-gray-500"
                end %>
      <% step_class = if is_current
                  "bg-gray-900 text-white"
                else
                  step[:is_complete] ? "bg-green-600/10 border-alpha-black-25" : "bg-gray-50"
                end %>

      <%= link_to step[:path], class: "flex items-center gap-3" do %>
        <div class="flex items-center gap-2 text-sm font-medium <%= text_class %>">
          <span class="<%= step_class %> w-7 h-7 rounded-full shrink-0 inline-flex items-center justify-center border border-transparent">
            <%= step[:is_complete] && !is_current ? lucide_icon("check", class: "w-4 h-4") : idx + 1 %>
          </span>

          <span><%= step[:name] %></span>
        </div>
      <% end %>

      <div class="h-px bg-alpha-black-200 w-12 group-last:hidden"></div>
    </li>
  <% end %>
</ul>
