<script lang="ts">
	import { onMount } from 'svelte';
	import { fly } from 'svelte/transition';
	import MoviePage from '../../../routes/movie/[id]/MoviePage.svelte';
	import SeriesPage from '../../../routes/series/[id]/SeriesPage.svelte';
	import { modalStack } from '../Modal/Modal';
	import type { TitleType } from '$lib/types';

	export let tmdbId: number;
	export let type: TitleType;
	export let modalId: Symbol;

	function handleCloseModal() {
		modalStack.close(modalId);
	}

	onMount(() => {
		console.log('TitlePageModal mounted');

		return () => console.log('TitlePageModal unmounted');
	});
</script>

<div
	class="max-w-screen-2xl overflow-x-hidden overflow-y-scroll h-screen sm:mx-4 lg:mx-12 xl:mx-16 scrollbar-hide"
>
	<div
		class="relative overflow-hidden"
		in:fly|global={{ y: 20, duration: 200, delay: 200 }}
		out:fly|global={{ y: 20, duration: 200 }}
	>
		{#if type === 'movie'}
			<MoviePage {tmdbId} isModal={true} {handleCloseModal} />
		{:else}
			<SeriesPage {tmdbId} isModal={true} {handleCloseModal} />
		{/if}
	</div>
</div>
