defmodule LiveAntd.Components.PageHeader do
  @moduledoc """

  ## API

  * [ ] `avatar`:	Avatar next to the title bar	AvatarProps	-
  * [ ] `backIcon`:	Custom back icon, if false the back icon will not be displayed	ReactNode | boolean	<ArrowLeft />
  * [x] `breadcrumb`:	Breadcrumb configuration	Breadcrumb	-
  * [x] `extra`:	Operating area, at the end of the line of the title line	ReactNode	-
  * [ ] `footer`:	PageHeader's footer, generally used to render TabBar	ReactNode	-
  * [x] `ghost`:	PageHeader type, will change background color	boolean	true
  * [x] `subTitle`:	Custom subtitle text	ReactNode	-
  * [ ] `tags`:	Tag list next to title	Tag[] | Tag	-
  * [x] `title`:	Custom title text	ReactNode	-
  * [ ] `onBack`:	Back icon click event	() => void

  ## Example

    <PageHeader
      title={{@title}}
      subTitle={{@sub_title}}
      breadcrumb={{@routes}}
    />
  """

  use Surface.Component

  alias LiveAntd.Components.Breadcrumb

  prop(title, :string)
  prop(breadcrumb, :any)
  prop(subTitle, :string)
  prop(ghost, :boolean)

  prop(extra, :string)

  def render(assigns) do
    ~H"""
    <div class={{
        "ant-page-header",
        "site-page-header",
        "has-breadcrumb": @breadcrumb,
        "ant-page-header-ghost": @ghost
      }}
    >
      <Breadcrumb routes={{@breadcrumb}} :if={{@breadcrumb}} />
      <div class="ant-page-header-heading">
        <div class="ant-page-header-heading-left">
          <span class="ant-page-header-heading-title" title="Title" :if={{@title}}>{{@title}}</span>
          <span class="ant-page-header-heading-sub-title" title="This is a subtitle" :if={{@subTitle}}>{{@subTitle}}</span>
        </div>
        <div class="ant-page-header-heading-extra" :if={{@extra}}>
          {{@extra}}
        </div>
      </div>
    </div>
    """
  end
end