<%# locals: (title:, content:, open: true) %>

<details class="group space-y-2" <%= "open" if open %>>
  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium
                        uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
    <h3><%= title %></h3>
    <%= lucide_icon "chevron-down",
              class: "group-open:transform group-open:rotate-180 text-gray-500 w-5 h-5" %>
  </summary>

  <%= content %>
</details>
