defmodule SigmaKit.Components.Icons do
  use Phoenix.LiveComponent

  @doc """
  Renders a [Heroicon](https://heroicons.com).

  Heroicons come in three styles – outline, solid, and mini.
  By default, the outline style is used, but solid and mini may
  be applied by using the `-solid` and `-mini` suffix.

  You can customize the size and colors of the icons by setting
  width, height, and background color classes.

  Icons are extracted from the `deps/heroicons` directory and bundled within
  your compiled app.css by the plugin in your `assets/tailwind.config.js`.

  ## Examples

      <.icon name="hero-x-mark-solid" />
      <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
  """
  attr :name, :string, required: true, doc: "The name of the icon"
  attr :class, :any, default: nil, doc: "Additional classes to apply to the icon"
  slot :inner_block, doc: "Content to be aligned with the icon"
  attr :spin, :boolean, default: false

  def icon(%{name: "hero-" <> _} = assigns) do
    ~H"""
    <span :if={SigmaKit.Util.blank?(@inner_block)} class={[@name, @class]} />
    <div :if={SigmaKit.Util.present?(@inner_block)} class="flex items-center">
      <span class={[@name, @class]} />
      <span class="ml-2">{render_slot(@inner_block)}</span>
    </div>
    """
  end

  def icon(%{name: "fa-" <> _} = assigns) do
    ~H"""
    <span class={[@name, @spin && ["animate-spin"], @class]} />
    """
  end
end