<template>
  <div class="view-container" :style="{ backgroundImage: theme.images.backgroundImg ? `url(${theme.images.backgroundImg})` : '' }">
    <div :class="['bgTop', long ? 'long' : '', mid ? 'mid' : '']"></div>
    <slot />
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'

const store = useStore()
const { theme } = storeToRefs(store)

defineProps({
  long: {
    type: Boolean,
    default: false
  },
  mid: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss" scoped>
.view-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: var(--global-background);
  .bgTop {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    height: 408px;
    &.long {
      height: 570px;
    }
    &.mid {
      height: 515px;
    }
  }
  @media (min-aspect-ratio: 1/1) {
    .bgTop {
      height: 280px;
      &.long {
        height: 280px;
      }
      &.mid {
        height: 280px;
      }
    }
  }
}
</style>
