<.section title="Buttons" description="Default button styles">
<div class="flex flex-col items-clockt justify-clockt lg:flex-row lg:flex-wrap lg:items-center space-y-2 lg:space-y-0 lg:space-x-2">
<button class="px-3 py-2 text-xs font-semibold text-white bg-blue-500 hover:bg-blue-600">
  Default
</button>
<button class="px-3 py-2 text-xs font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600">
  Rounded
</button>
<button class="inline-flex items-center px-3 py-2 text-xs font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 space-x-1">
  <.icon name="hero-clock" type="outline" class="h-4 w-4 stroke-current" />
  <span>With icon</span>
</button>
<button class="flex flex-row items-center justify-center px-3 py-2 text-xs font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 space-x-1">
  <span>With icon</span>
  <.icon name="hero-clock" type="outline" class="h-4 w-4 stroke-current" />
</button>
<button class="inline-flex items-center justify-center w-8 h-8 p-0 text-xs font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600">
  <.icon name="hero-clock" type="outline" class="h-4 w-4 stroke-current" />
</button>
</div>
</.section>

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