defmodule SigmaKit.Components.Headers do
  use Phoenix.LiveComponent
  import SigmaKit.Components.Icons, only: [icon: 1]

  attr :title, :string, required: true
  attr :subtitle, :string, default: nil
  attr :identity, :string, default: nil
  slot :action
  attr :tag, :string
  attr :tag_style, :atom, values: [:success, :danger, :info], default: :info

  slot :breadcrumb do
    attr :label, :string
    attr :to, :any
  end

  def page_header(assigns) do
    ~H"""
    <div class="mb-16 md:mb-8">
      <div class="flex flex-col md:flex-row justify-center md:justify-between items-center text-center md:text-start">
        <div>
          <div :if={assigns[:identity]} class="mb-2">
            <div class="uppercase text-xs font-medium text-zinc-500 px-2 py-0.5 bg-gray-50 inline rounded-lg border border-gray-200">
              {@identity}
            </div>
          </div>
          <div class="text-4xl font-light">{@title}</div>
          <div :if={assigns[:subtitle]}>{@subtitle}</div>
        </div>
        <div
          :if={@action != []}
          class="flex flex-col md:flex-row gap-4 items-center justify-center my-1 mt-2 md:my-0 md:justify-start"
        >
          <div :for={action <- @action} class="flex gap-4">
            {render_slot(action)}
          </div>
        </div>
      </div>
      <nav
        :if={SigmaKit.Util.present?(@breadcrumb)}
        class="py-1 text-gray-700 rounded-lg"
        aria-label="Breadcrumb"
      >
        <div class="flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse mb-0 justify-center md:justify-normal">
          <%= for breadcrumb <- @breadcrumb do %>
            <.link
              class="text-sm font-medium text-gray-700 hover:text-primary-600"
              navigate={breadcrumb.to}
            >
              {breadcrumb.label}
            </.link>
            <.icon name="hero-chevron-right" class="w-3 h-3 mx-2 mt-1 text-gray-800" />
          <% end %>
          <div class="mx-1 text-sm font-medium text-gray-400 md:mx-2">
            {@title}
          </div>
          <div
            :if={assigns[:tag]}
            class={[
              "text-xs font-semibold me-2 px-2 py-0.5 rounded-sm hidden flex",
              @tag_style == :info && "bg-blue-100 text-blue-800",
              @tag_style == :danger && "bg-red-100 text-red-800",
              @tag_style == :success && "bg-green-100 text-green-800"
            ]}
          >
            {@tag}
          </div>
        </div>
      </nav>
    </div>
    """
  end

  attr :title, :string, required: true
  attr :divide, :boolean, default: false
  slot :action

  def section_header(assigns) do
    ~H"""
    <div class={[
      "flex flex-col md:flex-row justify-center md:justify-between items-center mt-16 md:mt-8 mb-8 md:mb-2",
      @divide && "border-b border-gray-200 pb-1.5"
    ]}>
      <div class="text-lg font-black uppercase text-center md:text-start">{@title}</div>
      <div>
        <div :if={@action != []} class="flex gap-4 mt-4 md:mt-0">
          <div :for={action <- @action}>
            {render_slot(action)}
          </div>
        </div>
      </div>
    </div>
    """
  end
end