<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>