---
import Photo from '@/components/photo.astro';
import Typography from '@/components/typography.astro';
import type { Video } from '@/types/favorites-section';

export interface Props {
  value: Video;
}

const {
  value: { title, url },
} = Astro.props;

const id = url.split('/').pop();
const thumbnail = `https://img.youtube.com/vi/${id}/0.jpg`;
---

<a href={url} class="flex w-full max-w-[240px] flex-col gap-3 transition duration-300 hover:translate-y-2">
  <Photo class="rounded-lg shadow-md aspect-video object-cover" src={thumbnail} alt={title} width={480} height={270} />
  <Typography variant="tile-title">
    {title}
  </Typography>
</a>
