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

<header class="space-y-4">
  <div class="flex items-center gap-4">
    <% content = yield %>

    <% if content.present? %>
      <%= content %>
    <% else %>
      <div class="flex items-center gap-3 overflow-hidden">
        <%= render "accounts/logo", account: account %>

        <div class="truncate">
          <h2 class="font-medium text-xl truncate"><%= title || account.name %></h2>
          <% if subtitle.present? %>
            <p class="text-sm text-gray-500"><%= subtitle %></p>
          <% end %>
        </div>
      </div>
    <% end %>

    <div class="flex items-center gap-3 ml-auto">
      <% unless account.plaid_account_id.present? %>
        <%= button_to sync_account_path(account), disabled: account.syncing?, data: { turbo: false }, class: "flex items-center gap-2", title: "Sync Account" do %>
          <%= lucide_icon "refresh-cw", class: "w-4 h-4 text-gray-500 hover:text-gray-400" %>
        <% end %>
      <% end %>

      <%= render "accounts/show/menu", account: account %>
    </div>
  </div>

  <% if account.highest_priority_issue %>
    <%= render partial: "issues/issue", locals: { issue: account.highest_priority_issue } %>
  <% end %>
</header>
