<%# locals: (message:, type: "notice", **_opts) %> <% type = type.to_sym %> <% action = "animationend->element-removal#remove" if type == :notice %> <%= tag.div class: "flex gap-3 rounded-lg border bg-white p-4 group max-w-80 shadow-xs border-alpha-black-25", data: { controller: "element-removal", action: action } do %>

<% case type %> <% when :notice %>

<%= lucide_icon "check", class: "w-3 h-3" %>

<% when :alert %>

<%= lucide_icon "x", class: "w-3 h-3" %>

<% end %>

<%= tag.p message, class: "text-gray-900 text-sm font-medium" %>

<% if type.to_sym == :notice %>

<%= lucide_icon "x", class: "w-5 h-5 p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-gray-400 cursor-pointer", data: { action: "click->element-removal#remove" } %>

<% elsif type.to_sym == :alert %> <%= lucide_icon "x", data: { action: "click->element-removal#remove" }, class: "w-5 h-5 text-gray-500 hover:text-gray-600 cursor-pointer" %> <% end %>

<% end %>