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

export interface Props extends Video {}

const { title, url, image } = Astro.props;
---

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