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

export interface Props {
  value: Person;
}

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

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