<%# locals: (message:, description: nil, cta: nil) %> <%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs", data: { controller: "element-removal", action: "animationend->element-removal#remove" } do %>

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

<%= tag.p message, class: "text-primary text-sm font-medium" %> <% if description %> <%= tag.p description, class: "text-secondary text-sm" %> <% end %>

<% if cta %> <%= tag.div class:"flex gap-2 justify-end" do %> <%= tag.button cta[:decline][:label], class: "btn btn--secondary", data: { action: "click->element-removal#remove" } %> <%= tag.a cta[:accept][:label], href: cta[:accept][:href], class: "btn btn--primary" %> <% end %> <% end %>

<% unless cta %> <% end %>

<% unless cta %>

<%= 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-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>

<% end %> <% end %>