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

export interface Props {
  value: Book;
}

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

<a href={url} class="flex w-full max-w-[200px] flex-col gap-3 transition duration-300 hover:translate-y-2">
  <Photo src={cover} alt={title} class="aspect-[3/4] rounded-lg object-cover shadow-md" width={300} height={400} />
  <div class="w-full gap-1">
    <Typography variant="tile-title">
      {title}
    </Typography>
    <Typography variant="tile-subtitle">
      {author}
    </Typography>
  </div>
</a>
