sigma_kit

defmodule SigmaKit.Components.Tabs do
  use Phoenix.LiveComponent

  import SigmaKit.Components.Icons, only: [icon: 1]
  import SigmaKit.Components.Buttons, only: [action_dropdown: 1]

  @doc """
  Renders a tab style navigation bar. 

  This component does not handle content control, it is meant to be used for
  navigation, or with LiveView logic.
  """
  attr :id, :string, required: true, doc: "A unique identifier for the tab bar"
  attr :event, :string, doc: "The event to emit when a tab item is selected"
  attr :target, :any, doc: "The target for the event"

  slot :tab, doc: "Tab items that are always visible on the tab bar" do
    attr :icon, :string, doc: "An icon to display on the tab item"
    attr :label, :string, doc: "The label of the tab item"
    attr :id, :any, doc: "the value to send when a tab item is selected"
    attr :active, :boolean, doc: "If true the tab will be styled as active"
  end

  slot :action, doc: "overflow items presented as a dropdown menu" do
    attr :label, :string, doc: "The label for the menu item"
    attr :event, :string, doc: "The phx-click event for the menu item"
    attr :target, :string, doc: "The phx-target for the menu item"
    attr :id, :string, doc: "The value for the phx-click event"
    attr :icon, :string, doc: "The icon for the menu item"
  end

  def tabs(assigns) do
    ~H"""
    <div class={[
      "inline-flex gap-2 rounded border shadow-inner ps-1 bg-gray-50 select-none cursor-pointer font-medium text-sm overflow-hidden",
      SigmaKit.Util.present?(@action) && "pe-0",
      SigmaKit.Util.blank?(@action) && "pe-1"
    ]}>
      <div
        :for={tab <- @tab}
        phx-click={@event}
        phx-value-id={tab[:id]}
        phx-target={assigns[:target]}
        class={[
          "py-2 px-3 transition-all flex items-center duration-300 font-bold",
          tab[:active] &&
            "bg-gradient-to-t from-gray-100 to-20% to-white rounded shadow text-primary-600",
          !tab[:active] && "hover:text-black text-zinc-600"
        ]}
      >
        <.icon :if={tab[:icon]} name={tab[:icon]} class="w-4 h-4 mr-2" />
        {tab.label}
      </div>
      <.action_dropdown :if={SigmaKit.Util.present?(@action)} id={@id} class="py-2 bg-white">
        <:action
          :for={action <- @action}
          label={action[:label]}
          event={action[:event]}
          target={action[:target]}
          icon={action[:icon]}
          value={action[:value]}
        />
      </.action_dropdown>
    </div>
    """
  end
end