---
// src/components/Banner.astro
import "../styles/components/Banner.css"
---

<div id="banner-container"></div>

<script>
  const API_BASE = 'https://cms.gallus-pub.ch';

  async function loadBanner() {
    try {
      const response = await fetch(`${API_BASE}/api/banners/active`);
      if (response.ok) {
        const data = await response.json();
        if (data.banner) {
          const container = document.getElementById('banner-container');
          if (container) {
            container.innerHTML = `
              <div class="banner-wrapper">
                <div class="banner container">
                  <p>${data.banner.text}</p>
                </div>
              </div>
            `;
          }
        }
      }
    } catch (error) {
      console.error('Failed to fetch banner:', error);
    }
  }

  // Load banner when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadBanner);
  } else {
    loadBanner();
  }
</script>