<template>
  <section class="server-stats-section" aria-labelledby="buildserver-stats-title">
    <h2 id="buildserver-stats-title" class="section-title">
      <v-icon icon="mdi-chart-line" size="24" class="title-icon" />
      Buildserver Stats
    </h2>
    <div class="iframe-container">
      <iframe
        :height="iframeHeight"
        allowtransparency="true"
        class="stats-iframe"
        loading="lazy"
        title="Buildserver statistics dashboard"
        src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1" />
    </div>
  </section>
</template>

<script lang="ts" setup>
import { useDisplay } from 'vuetify'
import { computed } from 'vue'

const { width } = useDisplay()

const GRAPH_HEIGHT = 335
const NUMBER_OF_GRAPHS = 4

const iframeHeight = computed(() =>
  width.value <= 800 ? `${NUMBER_OF_GRAPHS * GRAPH_HEIGHT}px` : '420px'
)
</script>

<style scoped>
.server-stats-section {
  margin-bottom: var(--space-6);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.title-icon {
  color: var(--color-brand-primary);
}

.iframe-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.stats-iframe {
  width: 100%;
  border: none;
  display: block;
}

@media (max-width: 600px) {
  .iframe-container {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0 calc(-1 * var(--space-4));
  }

  .section-title {
    font-size: var(--font-size-lg);
  }
}
</style>
