<script setup lang="ts">
import type { Item } from '@/jfapi'
import jfapi from '@/jfapi'
import { RouterLink } from 'vue-router'

defineProps<{
  item: Item
}>()
</script>

<template>
  <div class="episode-thumb no-select">
    <div class="episode-img">
      <font-awesome-icon icon="fa-solid fa-play" class="play-icon" />
      <img :src="jfapi.PrimaryImageUrl(item.Id, item.ImageTags.Primary || '')" alt="" />
    </div>
    <RouterLink class="episode-title" :to="`/item/${item.Id}`" :key="item.Id">
      {{ `S${item.ParentIndexNumber}:E${item.IndexNumber} - ${item.Name}` }}
    </RouterLink>
  </div>
</template>

<style scoped>
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  padding: 0.75em;
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 10ms linear 0ms;
  opacity: 0%;
}
.play-icon:hover {
  background: rgba(122, 122, 122, 0.2);
  cursor: pointer;
}
.episode-img {
  position: relative;
}
.episode-img:hover .play-icon {
  opacity: 100%;
  transition:
    all var(--hover-animation-speed) ease,
    z-index 1ms;
}
.episode-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1em;
  gap: 0.5em;
}
.episode-thumb img {
  width: 300px;
  border-radius: 15px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.episode-title {
  max-width: 240px;
  text-align: center;
  font-size: 14px;
}
</style>
