<.phx_ui_badge rounded bg_color="bg-red-500">Important</.phx_ui_badge>
<.phx_ui_badge bg_color="bg-green-500">New</.phx_ui_badge>

<.phx_ui_badge outlined bg_color="bg-transparent" text_color="text-red-500" border_color="border-red-500" rounded>Important</.phx_ui_badge>
<.phx_ui_badge outlined bg_color="bg-transparent" text_color="text-green-500" border_color="border-green-500">New</.phx_ui_badge>

<.phx_ui_badge rounded bg_color="bg-red-200" text_color="text-red-600">Important</.phx_ui_badge>
<.phx_ui_badge bg_color="bg-green-200" text_color="text-green-600">New</.phx_ui_badge>

defmodule PHXUIWeb.Components.Badges do
  use Phoenix.Component

  @moduledoc """
  PHX UI badge component
  """

  attr :rest, :global
  attr :class, :string, default: ""
  attr :size, :string, default: "sm"
  attr :bg_color, :string, default: "bg-blue-500"
  attr :text_color, :string, default: "text-white"
  attr :rounded, :boolean, default: false
  attr :outlined, :boolean, default: false
  attr :circular, :boolean, default: false
  attr :uppercase, :boolean, default: false
  attr :border_color, :string, default: ""
  attr :font_weight, :string, default: "normal"

  slot(:inner_block)

  def phx_ui_badge(assigns) do
    ~H"""
    <span
      :if={@circular}
      {@rest}
      class={[
        "inline-flex text-center p-0 leading-none items-center justify-center rounded-full",
        @bg_color,
        @text_color,
        size_classes(@size, @circular),
        @rounded && "rounded-lg",
        @uppercase && "uppercase",
        @outlined && "border",
        font_weight_class(@font_weight),
        @border_color,
        @class
      ]}
    >
      <%= render_slot(@inner_block) %>
    </span>
    <span
      :if={not @circular}
      {@rest}
      class={[
        "inline-flex justify-center items-center gap-1 leading-none",
        @bg_color,
        @text_color,
        size_classes(@size, @circular),
        @rounded && "rounded-lg",
        @uppercase && "uppercase",
        @outlined && "border",
        font_weight_class(@font_weight),
        @border_color,
        @class
      ]}
    >
      <%= render_slot(@inner_block) %>
    </span>
    """
  end

  defp size_classes(size, false) do
    case size do
      "lg" -> "text-sm px-2 py-2"
      "md" -> "text-xs px-2 py-1.5"
      "sm" -> "text-xxs px-2 py-1"
    end
  end

  defp size_classes(size, true) do
    case size do
      "lg" -> "text-sm h-6 w-6"
      "md" -> "text-xs h-5 w-5"
      "sm" -> "text-xxs h-4 w-4"
    end
  end

  defp font_weight_class(font_weight) do
    case font_weight do
      "light" -> "font-light"
      "normal" -> "font-normal"
      "medium" -> "font-medium"
      "semibold" -> "font-semibold"
      "bold" -> "font-bold"
    end
  end
end

<.phx_ui_badge circular>1</.phx_ui_badge>
<.phx_ui_badge outlined bg_color="bg-transparent" text_color="text-blue-500" border_color="border-blue-500" circular>1</.phx_ui_badge>
<.phx_ui_badge circular bg_color="bg-blue-200" text_color="text-blue-600">1</.phx_ui_badge>

defmodule PHXUIWeb.Components.Badges do
  use Phoenix.Component

  @moduledoc """
  PHX UI badge component
  """

  attr :rest, :global
  attr :class, :string, default: ""
  attr :size, :string, default: "sm"
  attr :bg_color, :string, default: "bg-blue-500"
  attr :text_color, :string, default: "text-white"
  attr :rounded, :boolean, default: false
  attr :outlined, :boolean, default: false
  attr :circular, :boolean, default: false
  attr :uppercase, :boolean, default: false
  attr :border_color, :string, default: ""
  attr :font_weight, :string, default: "normal"

  slot(:inner_block)

  def phx_ui_badge(assigns) do
    ~H"""
    <span
      :if={@circular}
      {@rest}
      class={[
        "inline-flex text-center p-0 leading-none items-center justify-center rounded-full",
        @bg_color,
        @text_color,
        size_classes(@size, @circular),
        @rounded && "rounded-lg",
        @uppercase && "uppercase",
        @outlined && "border",
        font_weight_class(@font_weight),
        @border_color,
        @class
      ]}
    >
      <%= render_slot(@inner_block) %>
    </span>
    <span
      :if={not @circular}
      {@rest}
      class={[
        "inline-flex justify-center items-center gap-1 leading-none",
        @bg_color,
        @text_color,
        size_classes(@size, @circular),
        @rounded && "rounded-lg",
        @uppercase && "uppercase",
        @outlined && "border",
        font_weight_class(@font_weight),
        @border_color,
        @class
      ]}
    >
      <%= render_slot(@inner_block) %>
    </span>
    """
  end

  defp size_classes(size, false) do
    case size do
      "lg" -> "text-sm px-2 py-2"
      "md" -> "text-xs px-2 py-1.5"
      "sm" -> "text-xxs px-2 py-1"
    end
  end

  defp size_classes(size, true) do
    case size do
      "lg" -> "text-sm h-6 w-6"
      "md" -> "text-xs h-5 w-5"
      "sm" -> "text-xxs h-4 w-4"
    end
  end

  defp font_weight_class(font_weight) do
    case font_weight do
      "light" -> "font-light"
      "normal" -> "font-normal"
      "medium" -> "font-medium"
      "semibold" -> "font-semibold"
      "bold" -> "font-bold"
    end
  end
end

<.phx_ui_badge rounded size="lg">Large</.phx_ui_badge>
<.phx_ui_badge rounded size="md">Medium</.phx_ui_badge>
<.phx_ui_badge rounded>Default</.phx_ui_badge>

<.phx_ui_badge outlined bg_color="bg-transparent" text_color="text-blue-500" border_color="border-blue-500" size="lg">Large</.phx_ui_badge>
<.phx_ui_badge outlined bg_color="bg-transparent" text_color="text-blue-500" border_color="border-blue-500" size="md">Medium</.phx_ui_badge>
<.phx_ui_badge outlined bg_color="bg-transparent" text_color="text-blue-500" border_color="border-blue-500">Default</.phx_ui_badge>

defmodule PHXUIWeb.Components.Badges do
  use Phoenix.Component

  @moduledoc """
  PHX UI badge component
  """

  attr :rest, :global
  attr :class, :string, default: ""
  attr :size, :string, default: "sm"
  attr :bg_color, :string, default: "bg-blue-500"
  attr :text_color, :string, default: "text-white"
  attr :rounded, :boolean, default: false
  attr :outlined, :boolean, default: false
  attr :circular, :boolean, default: false
  attr :uppercase, :boolean, default: false
  attr :border_color, :string, default: ""
  attr :font_weight, :string, default: "normal"

  slot(:inner_block)

  def phx_ui_badge(assigns) do
    ~H"""
    <span
      :if={@circular}
      {@rest}
      class={[
        "inline-flex text-center p-0 leading-none items-center justify-center rounded-full",
        @bg_color,
        @text_color,
        size_classes(@size, @circular),
        @rounded && "rounded-lg",
        @uppercase && "uppercase",
        @outlined && "border",
        font_weight_class(@font_weight),
        @border_color,
        @class
      ]}
    >
      <%= render_slot(@inner_block) %>
    </span>
    <span
      :if={not @circular}
      {@rest}
      class={[
        "inline-flex justify-center items-center gap-1 leading-none",
        @bg_color,
        @text_color,
        size_classes(@size, @circular),
        @rounded && "rounded-lg",
        @uppercase && "uppercase",
        @outlined && "border",
        font_weight_class(@font_weight),
        @border_color,
        @class
      ]}
    >
      <%= render_slot(@inner_block) %>
    </span>
    """
  end

  defp size_classes(size, false) do
    case size do
      "lg" -> "text-sm px-2 py-2"
      "md" -> "text-xs px-2 py-1.5"
      "sm" -> "text-xxs px-2 py-1"
    end
  end

  defp size_classes(size, true) do
    case size do
      "lg" -> "text-sm h-6 w-6"
      "md" -> "text-xs h-5 w-5"
      "sm" -> "text-xxs h-4 w-4"
    end
  end

  defp font_weight_class(font_weight) do
    case font_weight do
      "light" -> "font-light"
      "normal" -> "font-normal"
      "medium" -> "font-medium"
      "semibold" -> "font-semibold"
      "bold" -> "font-bold"
    end
  end
end