<script setup lang="ts">
//#region --Props--.
import { FilmIcon } from "lucide-vue-next";

defineProps({
  src: {
    type: String,
    required: true,
    nullable: false,
  },
  title: {
    type: String,
    required: true,
    nullable: false,
  },
});
//#endregion
</script>

<template>
  <section class="w-full md:w-1/3 lg:w-1/4">
    <div class="rounded-lg overflow-hidden shadow-lg bg-gray-800">
      <v-img v-if="src" :alt="title" :src="`https://image.tmdb.org/t/p/w500${src}`" class="w-full h-auto" />
      <div v-else class="aspect-[2/3] bg-gray-700 flex items-center justify-center">
        <FilmIcon :size="64" class="text-gray-500" />
      </div>
    </div>
  </section>
</template>

<style scoped></style>