<template>
  <div class="cpSeatMapGrid">
    <div class="cpSeatMapGrid__columns">
      <span v-for="(column, index) in layout" :key="index" class="cpSeatMapGrid__column">
        {{ column }}
      </span>
    </div>
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { SeatMapLayout } from '@/helpers/seatMap'

interface Props {
  layout: SeatMapLayout
}

defineProps<Props>()
</script>

<style lang="scss">
.cpSeatMapGrid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cp-spacing-md);

  &__columns {
    display: grid;
    font-size: fn.px-to-em(12);
    font-weight: 700;
    gap: var(--cp-spacing-md);
    letter-spacing: fn.px-to-rem(2);
    line-height: fn.px-to-rem(24);
    text-align: center;
    text-transform: uppercase;
  }
}
</style>
