<%# locals: (headers: [], rows: [], caption: nil) %>
<div class="bg-container-inset rounded-xl overflow-hidden mx-1 md:mx-auto p-3 pl-2 pr-2">
  <% if caption %>
    <div class="flex items-center mb-4">
      <div class="text-gray-500 mr-2">
        <%= inline_svg_tag "icon-csv.svg", class: "w-4 h-4" %>
      </div>
      <h2 class="text-sm text-gray-500 font-medium"><%= caption %></h2>
    </div>
  <% end %>
  <div class="overflow-x-auto -webkit-overflow-scrolling-touch">
    <div class="inline-block min-w-fit sm:w-full border border-secondary rounded-md shadow-border-xs text-sm bg-container">
      <table class="min-w-full divide-y divide-alpha-black-200">
        <thead>
          <tr>
            <% headers.each_with_index do |header, index| %>
              <th class="
                bg-container-inset px-3 py-2.5 font-medium text-left whitespace-nowrap
                <%= index == 0 ? "rounded-tl-md" : "" %>
                <%= index == headers.length - 1 ? "rounded-tr-md" : "" %>
                <%= index < headers.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
              ">
                <%= header %>
              </th>
            <% end %>
          </tr>
        </thead>
        <tbody class="divide-y divide-alpha-black-200">
          <% rows.each_with_index do |row, row_index| %>
            <tr>
              <% row.each_with_index do |(header, value), col_index| %>
                <td class="
                  px-3 py-2.5 whitespace-nowrap text-left
                  <%= col_index < row.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
                  <%= !caption && row_index == rows.length - 1 && col_index == 0 ? "rounded-bl-md" : "" %>
                  <%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? "rounded-br-md" : "" %>
                ">
                  <%= value %>
                </td>
              <% end %>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
</div>
