<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import SiteHeader from '@/components/SiteHeader.vue'

const route = useRoute()

const elementId = computed(() => {
  const routeElementId = route.params.id

  if (Array.isArray(routeElementId)) {
    return routeElementId.join('/')
  }

  return routeElementId
})
</script>

<template>
  <div class="element-page">
    <SiteHeader />
    <main class="element-page__main" data-cy="element-page">
      <h1 class="element-page__heading">Element {{ elementId }}</h1>
    </main>
  </div>
</template>

<style scoped>
.element-page {
  min-height: 100vh;
  background: var(--color-white);
}

.element-page__main {
  min-height: 100vh;
  padding: 5.1rem 4.15rem 5rem;
}

.element-page__heading {
  margin: 0;
  color: #2c2c2c;
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4.8vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
}

@media (max-width: 768px) {
  .element-page__main {
    padding: 3rem 1rem;
  }
}
</style>
