Alert

<%= render HakumiComponents::Alert::Component.new do %>
  This is a simple informational alert.
<% end %>

<%= render(HakumiComponents::Alert::Component.new(
  type: :success,
  show_icon: true
)) do |alert| %>
  <% alert.with_message { "Success Tips" } %>
  <% alert.with_description { "Detailed description of the alert and how to resolve it." } %>
<% end %>

<%= render(HakumiComponents::Alert::Component.new(
  type: :warning,
  show_icon: true
)) do |alert| %>
  <% alert.with_icon do %>
    <%= render(HakumiComponents::Icon::Component.new(name: :smile)) %>
  <% end %>
  <% alert.with_message { "Warning" } %>
  <% alert.with_description { "Custom icon and description example." } %>
<% end %>

<%= render(HakumiComponents::Alert::Component.new(
  type: :error,
  closable: true,
  show_icon: true
)) do |alert| %>
  <% alert.with_message { "Error" } %>
  <% alert.with_description { "Click close to dismiss this alert." } %>
<% end %>

<%= render(HakumiComponents::Space::Component.new) do %>
  <%= render(HakumiComponents::Button::Component.new(id: "prog-alert-success", type: :primary, style: "background-color: #52c41a; border-color: #52c41a;")) { "Success" } %>
  <%= render(HakumiComponents::Button::Component.new(id: "prog-alert-info", type: :primary, style: "background-color: #1677ff;")) { "Info" } %>
  <%= render(HakumiComponents::Button::Component.new(id: "prog-alert-warning", type: :primary, style: "background-color: #faad14; border-color: #faad14;")) { "Warning" } %>
  <%= render(HakumiComponents::Button::Component.new(id: "prog-alert-error", type: :primary, danger: true)) { "Error" } %>
<% end %>

<div id="programmatic-alert-target" style="margin-top: 16px; display: flex; flex-direction: column; gap: 8px;"></div>

<script>
  (() => {
    const buttons = ["success", "info", "warning", "error"]

    const wire = () => {
      if (!window.HakumiComponents?.renderComponent) return false

      const createAlert = (type) => {
        window.HakumiComponents.renderComponent("alert", {
          params: {
            type,
            message: `${type.charAt(0).toUpperCase() + type.slice(1)} Alert`,
            description: `Created dynamically at ${new Date().toLocaleTimeString()}`,
            show_icon: true,
            closable: true
          },
          target: "#programmatic-alert-target",
          mode: "destroy_on_close"
        })
      }

      buttons.forEach((type) => {
        document.getElementById(`prog-alert-${type}`)?.addEventListener("click", () => createAlert(type))
      })

      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)
  })()
</script>