defmodule LiveAntd.Components.Breadcrumb do
  @moduledoc """
  A breadcrumb displays the current location within a hierarchy.
  It allows going back to states higher up in the hierarchy.

  ## API
  ### Breadcrumb

    * [ ] `itemRender`:	Custom item renderer
    * [ ] `params`:	Routing parameters
    * [x] `routes`:	The routing stack information of router
    * [x] `separator`:	Custom separator

  ### Breadcrumb.Item

    * [ ] `dropdownProps`:	The dropdown props	Dropdown	-
    * [ ] `href`:	Target of hyperlink	string	-
    * [ ] `overlay`:	The dropdown menu
    * [ ] `onClick`:	Set the handler to handle click event

  ### Breadcrumb.Separator
    * [ ] `children`: Custom separator

  ## Example

    routes = [%{path: "", breadcrumb_name: ""}, %{}, %{}]
    <Breadcrumb routes={routes} />

  """

  use Surface.Component

  prop(routes, :list, required: true)
  prop(separator, :string, default: "/")

  def render(assigns) do
    ~H"""
    <div class="ant-breadcrumb">
      <span :for={{ item <- @routes }}>
        <span class="ant-breadcrumb-link">
          <a href={{ item.path }}>{{ item.breadcrumb_name }}</a>
        </span>
        <span class="ant-breadcrumb-separator">{{ @separator }}</span>
      </span>
    </div>
    """
  end
end