---
import { Image } from '@astrojs/image/components';

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

export interface Props {
  value: Media;
}

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

<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
  <Image
    class="rounded-lg shadow-md aspect-square object-cover"
    fit="cover"
    format="webp"
    aspectRatio={1}
    quality={100}
    src={image}
    alt={title}
  />
  <div class="gap-1">
    <Typography variant="tile-title">
      {title}
    </Typography>
    <Typography variant="tile-subtitle">
      {type}
    </Typography>
  </div>
</a>