<.phx_ui_alert size="sm">This is an important phx_ui_alert. Check it out!</.phx_ui_alert>
<.phx_ui_alert with_icon type="info">This is an important phx_ui_alert. Check it out!</.phx_ui_alert>
<.phx_ui_alert rounded size="lg">This is an important phx_ui_alert. Check it out!</.phx_ui_alert>

defmodule PHXUIWeb.Components.Alerts do
  use Phoenix.Component
  import PHXUIWeb.CoreComponents

  @moduledoc """
  PHX UI alert component
  """

  attr :rest, :global
  attr :class, :string, default: ""
  attr :type, :string, default: "info", values: ["info", "success", "warning", "danger"]
  attr :size, :string, default: "md"
  attr :bg_color, :string, default: "bg-red-500"
  attr :text_color, :string, default: "text-white"
  attr :with_icon, :boolean, default: false
  attr :raised, :boolean, default: false
  attr :rounded, :boolean, default: false
  attr :outlined, :boolean, default: false
  attr :border_color, :string, default: "border-red-500"
  attr :left_border, :boolean, default: false

  slot(:inner_block)

  def alert(assigns) do
    ~H"""
    <div
      @rest
      class={[
        "w-full flex items-center justify-start",
        @bg_color,
        @text_color,
        size_classes(@size),
        @raised && "shadow",
        @rounded && "rounded-lg",
        @outlined && "border",
        @left_border && "border-l-4",
        @border_color,
        @class
      ]}
    >
      <div class="shrink">
        <.icon :if={@with_icon and @type == "success"} name="hero-check-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "warning"} name="hero-exclamation-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "info"} name="hero-information-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "danger"} name="hero-x-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
      </div>
      <div class="flex-grow">
        <%= render_slot(@inner_block) %>
      </div>
      <div class="shrink">
        <button class="ml-auto flex items-center justify-center">
          <.icon name="hero-x-mark" class="h-5 w-5 stroke-current stroke-2" />
        </button>
      </div>
    </div>
    """
  end

  defp size_classes(size) do
    case size do
      "lg" -> "p-4"
      "md" -> "p-3"
      "sm" -> "p-2"
    end
  end
end

<.phx_ui_alert size="sm" bg_color="bg-white" text_color="text-red-500" raised>
This is an important phx_ui_alert. Check it out!
</.phx_ui_alert>
<.phx_ui_alert with_icon bg_color="bg-white" text_color="text-red-500" raised>
This is an important phx_ui_alert. Check it out!
</.phx_ui_alert>
<.phx_ui_alert size="lg" bg_color="bg-white" text_color="text-red-500" raised>
This is an important phx_ui_alert. Check it out!
</.phx_ui_alert>

defmodule PHXUIWeb.Components.Alerts do
  use Phoenix.Component
  import PHXUIWeb.CoreComponents

  @moduledoc """
  PHX UI alert component
  """

  attr :rest, :global
  attr :class, :string, default: ""
  attr :type, :string, default: "info", values: ["info", "success", "warning", "danger"]
  attr :size, :string, default: "md"
  attr :bg_color, :string, default: "bg-red-500"
  attr :text_color, :string, default: "text-white"
  attr :with_icon, :boolean, default: false
  attr :raised, :boolean, default: false
  attr :rounded, :boolean, default: false
  attr :outlined, :boolean, default: false
  attr :border_color, :string, default: "border-red-500"
  attr :left_border, :boolean, default: false

  slot(:inner_block)

  def alert(assigns) do
    ~H"""
    <div
      @rest
      class={[
        "w-full flex items-center justify-start",
        @bg_color,
        @text_color,
        size_classes(@size),
        @raised && "shadow",
        @rounded && "rounded-lg",
        @outlined && "border",
        @left_border && "border-l-4",
        @border_color,
        @class
      ]}
    >
      <div class="shrink">
        <.icon :if={@with_icon and @type == "success"} name="hero-check-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "warning"} name="hero-exclamation-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "info"} name="hero-information-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "danger"} name="hero-x-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
      </div>
      <div class="flex-grow">
        <%= render_slot(@inner_block) %>
      </div>
      <div class="shrink">
        <button class="ml-auto flex items-center justify-center">
          <.icon name="hero-x-mark" class="h-5 w-5 stroke-current stroke-2" />
        </button>
      </div>
    </div>
    """
  end

  defp size_classes(size) do
    case size do
      "lg" -> "p-4"
      "md" -> "p-3"
      "sm" -> "p-2"
    end
  end
end

<.phx_ui_alert size="sm" bg_color="bg-white" text_color="text-red-500" outlined border_color="border-red-500">
This is an important phx_ui_alert. Check it out!
</.phx_ui_alert>
<.phx_ui_alert bg_color="bg-white" text_color="text-red-500" outlined border_color="border-red-500">
This is an important phx_ui_alert. Check it out!
</.phx_ui_alert>
<.phx_ui_alert size="lg" bg_color="bg-white" text_color="text-red-500" outlined border_color="border-red-500">
This is an important phx_ui_alert. Check it out!
</.phx_ui_alert>

defmodule PHXUIWeb.Components.Alerts do
  use Phoenix.Component
  import PHXUIWeb.CoreComponents

  @moduledoc """
  PHX UI alert component
  """

  attr :rest, :global
  attr :class, :string, default: ""
  attr :type, :string, default: "info", values: ["info", "success", "warning", "danger"]
  attr :size, :string, default: "md"
  attr :bg_color, :string, default: "bg-red-500"
  attr :text_color, :string, default: "text-white"
  attr :with_icon, :boolean, default: false
  attr :raised, :boolean, default: false
  attr :rounded, :boolean, default: false
  attr :outlined, :boolean, default: false
  attr :border_color, :string, default: "border-red-500"
  attr :left_border, :boolean, default: false

  slot(:inner_block)

  def alert(assigns) do
    ~H"""
    <div
      @rest
      class={[
        "w-full flex items-center justify-start",
        @bg_color,
        @text_color,
        size_classes(@size),
        @raised && "shadow",
        @rounded && "rounded-lg",
        @outlined && "border",
        @left_border && "border-l-4",
        @border_color,
        @class
      ]}
    >
      <div class="shrink">
        <.icon :if={@with_icon and @type == "success"} name="hero-check-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "warning"} name="hero-exclamation-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "info"} name="hero-information-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "danger"} name="hero-x-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
      </div>
      <div class="flex-grow">
        <%= render_slot(@inner_block) %>
      </div>
      <div class="shrink">
        <button class="ml-auto flex items-center justify-center">
          <.icon name="hero-x-mark" class="h-5 w-5 stroke-current stroke-2" />
        </button>
      </div>
    </div>
    """
  end

  defp size_classes(size) do
    case size do
      "lg" -> "p-4"
      "md" -> "p-3"
      "sm" -> "p-2"
    end
  end
end

<.phx_ui_alert
  size="sm"
  bg_color="bg-white"
  text_color="text-red-500"
  left_border
  raised
  border_color="border-red-500"
>
  This is an important phx_ui_alert. Check it out!
</.phx_ui_alert>
<.phx_ui_alert
  with_icon
  bg_color="bg-white"
  text_color="text-red-500"
  left_border
  raised
  border_color="border-red-500"
>
  This is an important phx_ui_alert. Check it out!
</.phx_ui_alert>
<.phx_ui_alert
  size="lg"
  bg_color="bg-white"
  text_color="text-red-500"
  left_border
  raised
  border_color="border-red-500"
>
  This is an important phx_ui_alert. Check it out!
</.phx_ui_alert>

defmodule PHXUIWeb.Components.Alerts do
  use Phoenix.Component
  import PHXUIWeb.CoreComponents

  @moduledoc """
  PHX UI alert component
  """

  attr :rest, :global
  attr :class, :string, default: ""
  attr :type, :string, default: "info", values: ["info", "success", "warning", "danger"]
  attr :size, :string, default: "md"
  attr :bg_color, :string, default: "bg-red-500"
  attr :text_color, :string, default: "text-white"
  attr :with_icon, :boolean, default: false
  attr :raised, :boolean, default: false
  attr :rounded, :boolean, default: false
  attr :outlined, :boolean, default: false
  attr :border_color, :string, default: "border-red-500"
  attr :left_border, :boolean, default: false

  slot(:inner_block)

  def alert(assigns) do
    ~H"""
    <div
      @rest
      class={[
        "w-full flex items-center justify-start",
        @bg_color,
        @text_color,
        size_classes(@size),
        @raised && "shadow",
        @rounded && "rounded-lg",
        @outlined && "border",
        @left_border && "border-l-4",
        @border_color,
        @class
      ]}
    >
      <div class="shrink">
        <.icon :if={@with_icon and @type == "success"} name="hero-check-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "warning"} name="hero-exclamation-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "info"} name="hero-information-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
        <.icon :if={@with_icon and @type == "danger"} name="hero-x-circle" class="h-5 w-5 stroke-current stroke-2 mr-1.5" />
      </div>
      <div class="flex-grow">
        <%= render_slot(@inner_block) %>
      </div>
      <div class="shrink">
        <button class="ml-auto flex items-center justify-center">
          <.icon name="hero-x-mark" class="h-5 w-5 stroke-current stroke-2" />
        </button>
      </div>
    </div>
    """
  end

  defp size_classes(size) do
    case size do
      "lg" -> "p-4"
      "md" -> "p-3"
      "sm" -> "p-2"
    end
  end
end