<template>
  <div class="public-layout" :style="bgStyle">
    <RouterView />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { RouterView } from 'vue-router'

import { gallery } from '@/utils/gallery'

const props = defineProps({
  background: { type: String, default: '' },
})

const bgStyle = computed(() =>
  props.background ? { backgroundImage: `url(${props.background || gallery.loginPattern})` } : {}
)
</script>

<style lang="scss" scoped>
.public-layout {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
