<%# locals: (message:) %>

<%= tag.div class: "flex gap-3 rounded-lg bg-container p-4 group w-full md:max-w-80 shadow-border-lg",
            data: { controller: "element-removal" } do %>
  <div class="h-5 w-5 shrink-0 p-px text-primary">
    <div class="flex h-full items-center justify-center rounded-full bg-destructive">
      <%= icon "x", size: "xs", color: "white" %>
    </div>
  </div>

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

  <div class="ml-auto">
    <%= icon "x", data: { action: "click->element-removal#remove" }, class: "cursor-pointer" %>
  </div>
<% end %>
