<template>
  <div class="cpSeatMapZone">
    <cp-heading class="cpSeatMapZone__title" heading-level="h6">{{ title }}</cp-heading>
    <div class="cpSeatMapZone__layout">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import CpHeading from './CpHeading.vue'

interface Props {
  title: string
}

defineProps<Props>()
</script>

<style lang="scss">
.cpSeatMapZone {
  display: flex;
  flex-direction: column;
  gap: var(--cp-spacing-md);

  &__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: fn.px-to-em(12);
    font-weight: 700;
    gap: var(--cp-spacing-xl);
    letter-spacing: fn.px-to-rem(2);
    line-height: fn.px-to-rem(24);
    text-transform: uppercase;

    &::before,
    &::after {
      display: block;
      width: 100%;
      height: fn.px-to-rem(1);
      flex: 1;
      background-color: var(--cp-border-soft);
      content: '';
    }
  }

  &__layout {
    padding-inline: fn.px-to-rem(20);
  }
}

@include mx.media-query-max(551px) {
  .cpSeatMapZone {
    &__layout {
      padding-inline: 0;
    }
  }
}
</style>
