defmodule FeenixUiWeb.Components.MultiStepperComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :steps, fn -> [] end)
    assigns = assign_new(assigns, :current, fn -> 1 end)

    ~H"""
    <div class="w-full">
      <div class="flex items-center justify-between">
        <%= for {step, index} <- Enum.with_index(@steps) do %>
          <div class="flex items-center">
            <div class={[
              "flex items-center justify-center w-8 h-8 rounded-full border-2 text-sm font-medium",
              if(index + 1 < @current, do: "bg-primary-600 border-primary-600 text-white",
                else: if(index + 1 == @current, do: "border-primary-600 text-primary-600",
                  else: "border-gray-300 text-gray-500"))
            ]}>
              <%= if index + 1 < @current do %>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
              <% else %>
                <%= index + 1 %>
              <% end %>
            </div>
            <div class="ml-3">
              <p class={[
                "text-sm font-medium",
                if(index + 1 <= @current, do: "text-primary-600", else: "text-gray-500")
              ]}>
                <%= step %>
              </p>
            </div>
            <%= if index < length(@steps) - 1 do %>
              <div class={[
                "w-16 h-0.5 mx-4",
                if(index + 1 < @current, do: "bg-primary-600", else: "bg-gray-300")
              ]}></div>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
    """
  end
end