// Header Component
export function Header({ team, onBack, onThemeToggle }) {
  return `
    <header class="dashboard-header">
      <div class="dashboard-header__left">
        <button class="back-button" onclick="${onBack}" aria-label="Back to home">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M19 12H5M12 19l-7-7 7-7"/>
          </svg>
          <span>back</span>
        </button>
        <div class="team-indicator">
          <span class="team-indicator__name">${team.toUpperCase()} TEAM</span>
        </div>
      </div>
      <div class="dashboard-header__right">
        <button class="icon-button" onclick="${onThemeToggle}" aria-label="Toggle theme">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
          </svg>
        </button>
      </div>
    </header>
  `;
}

export default Header;
