<script setup lang="ts">
const props = defineProps<{
	bgImage?: string | null
	hasImage?: boolean
	contentPosition?: 'center' | 'bottom'
	maxWidth?: string
}>()

const bgStyle = props.bgImage ? { backgroundImage: `url(${props.bgImage})` } : undefined
</script>

<template>
	<div class="screen-layout" :data-position="contentPosition">
		<div
			class="bg-layer"
			:class="{ 'has-image': !!bgImage || hasImage }"
			:style="bgStyle"
			aria-hidden="true"
		/>
		<div class="bg-overlay" aria-hidden="true" />
		<div class="content-layer" :style="{ maxWidth: maxWidth || '640px' }">
			<slot />
		</div>
	</div>
</template>

<style scoped lang="scss">
.screen-layout {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: hsl(var(--base));
	color: hsl(var(--text));
	overflow: hidden;
	perspective: 1000px;
}

.bg-layer {
	position: absolute;
	inset: -10%;
	z-index: -2;
	will-change: transform, filter, opacity;
	opacity: 1;
	transition:
		transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
		filter 0.9s ease,
		opacity 0.9s ease;
	filter: blur(16px) saturate(1.05);
	transform: scale(1.05);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.bg-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		hsla(var(--base) / 0.12) 0%,
		hsla(var(--base) / 0.7) 60%,
		hsla(var(--base) / 0.95) 100%
	);
}

.content-layer {
	position: relative;
	z-index: 10;
	width: 100%;
	padding: 2rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	will-change: transform, opacity, filter;
	transition: all 0.6s cubic-bezier(0.6, 0, 0.4, 1);
	justify-content: center;
}

.screen-layout[data-position='bottom'] .content-layer {
	justify-content: flex-end;
	padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}
</style>
