<%# locals: (message:, description:) %>

<div id="cta">
  <%= tag.div class: "relative flex gap-3 rounded-lg bg-container p-4 group w-full md:max-w-80 shadow-border-xs", 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-success fg-inverse">
        <%= icon "check", size: "xs", color: "current" %>
      </div>
    </div>

    <div class="space-y-4">
      <div class="space-y-1">
        <%= tag.p message, class: "text-primary text-sm font-medium" %>
        <%= tag.p description, class: "text-secondary text-sm" %>
      </div>

      <%= yield %>
    </div>
  <% end %>
</div>
