<template>
	<ul class="w-full grid gap-8 grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 self-center ">
		<li class="inline-block" v-for="(movie, index) in movies">
			<movie-poster class="shadow-md hover:shadow-lg rounded-xl motion-safe:transform hover:scale-105 transition-transform ease-out cursor-pointer"
				:src="movie.posterPath ?? undefined" size="w185" @click="$emit('onClickMovie', movie, index)"/>
		</li>
	</ul>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { IApiMovie } from "../../common/api_schema";
import MoviePoster from "./MoviePoster.vue";

export default defineComponent({
	components: {
		MoviePoster
	},
	data() {
		return {

		}
	},
	methods: {
		onModalClosed() {
			let parentPath = this.$route.path.split('/').slice(0, -1).join('/');
            this.$router.push({ path: parentPath, query: this.$route.query });
		}
	},
	props: {
		movies: {
			default: <IApiMovie[]>[]
		}
	}
});
</script>
