<.phx_breadcrumbs id="breadcrumbs-1" class="mb-4" home={true}>
<:breadcrumb name="Home" href={~p"/breadcrumbs"} />
</.phx_breadcrumbs>

<.phx_breadcrumbs id="breadcrumbs-2" class="mb-4" home={true}>
<:breadcrumb name="Home" href={~p"/breadcrumbs"} />
<:breadcrumb name="First level" href={~p"/breadcrumbs/first-level"} />
</.phx_breadcrumbs>

<.phx_breadcrumbs id="breadcrumbs-3" class="mb-4" home={true}>
<:breadcrumb name="Home" href={~p"/breadcrumbs"} />
<:breadcrumb name="First level" href={~p"/breadcrumbs/first-level"} />
<:breadcrumb name="Second level" href={~p"/breadcrumbs/first-level/second-level"} />
</.phx_breadcrumbs>

defmodule PHXUIWeb.Components.Breadcrumbs do
  use Phoenix.Component
  import PHXUIWeb.CoreComponents

  @moduledoc """
  PHX UI breadcrumb component
  """

  @doc """
  Renders an phx_ui_alert.

  ## Examples

      <.phx_ui_alert>
        This is an important phx_ui_alert. Check it out!
      </.phx_ui_alert>

  """
  attr(:rest, :global)
  attr(:id, :string, required: true)

  attr(:separator, :string,
    default: "/",
    values: ["/", ">", "arrow-small-right", "chevron-right", "chevron-double-right"]
  )

  attr(:home, :boolean, default: false)
  slot(:inner_block)

  slot :breadcrumb, required: true do
    attr(:active, :boolean)
    attr(:name, :string)
    attr(:href, :string)
  end

  def phx_breadcrumbs(assigns) do
    ~H"""
    <div {@rest} id={@id}>
      <div class="flex flex-row mb-4">
        <div class="w-full">
          <nav class="w-full flex">
            <ol class="flex flex-row items-center justify-start list-none space-x-2">
              <li
                :for={{breadcrumb, i} <- Enum.with_index(@breadcrumb)}
                class="flex items-center space-x-2"
                class={[
                  "relative pb-10",
                  breadcrumb[:active] && "font-bold"
                ]}
              >
                <.icon :if={@home and i == 0} name="hero-home" type="outline" class="h-3 w-3 stroke-current stroke-2" />
                <.link patch={breadcrumb[:href]}>
                  <%= breadcrumb.name %>
                </.link>

                <.icon
                  :if={i != length(@breadcrumb) - 1 && @separator in ["hero-arrow-small-right", "hero-chevron-right", "hero-chevron-double-right"]}
                  name={@separator}
                  class="h-3 w-3 stroke-current stroke-2"
                />
                <span :if={i != length(@breadcrumb) - 1 && @separator in ["/", ">"]}><%= @separator %></span>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
    """
  end
end