<%# locals: (title:, content:, subtitle: nil) %>

<%= modal do %>
  <article class="mx-auto w-full p-4 space-y-4 min-w-[450px]">
    <div class="space-y-2">
      <header class="flex justify-between items-center">
        <h2 class="font-medium"><%= title %></h2>
        <%= lucide_icon("x", class: "cursor-pointer w-5 h-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
      </header>

      <% if subtitle.present? %>
        <%= tag.p subtitle, class: "text-secondary font-light" %>
      <% end %>
    </div>

    <%= content %>
  </article>
<% end %>
