---
import BookTile from '@/atoms/book-tile.astro';
import MediaTile from '@/atoms/media-tile.astro';
import PersonTile from '@/atoms/person-tile.astro';
import Typography from '@/atoms/typography.astro';
import VideoTile from '@/atoms/video-tile.astro';
import type { Book, Media, Person, Video } from '@/types/favorites-section';

const book: Book = {
  cover: import('@/assets/favorites/books/book-1.jpeg'),
  title: 'The Pragmatic Programmer: From Journeyman to Master',
  author: 'Andy Hunt, Dave Thomas',
  url: 'https://www.goodreads.com/book/show/4099.The_Pragmatic_Programmer',
};

const person: Person = {
  image: import('@/assets/favorites/people/person-1.jpg'),
  name: 'Kent C. Dodds',
  url: 'https://kentcdodds.com/',
};

const video: Video = {
  thumbnail: import('@/assets/favorites/videos/video-1.jpeg'),
  title: 'Building Resilient Frontend Architecture - Monica Lent - GOTO 2019',
  url: 'https://youtu.be/TqfbAXCCVwE',
};

const media: Media = {
  image: import('@/assets/favorites/media/media-1.jpeg'),
  title: 'Fireship.io',
  type: 'YouTube channel',
  url: 'https://www.youtube.com/c/Fireship',
};
---

<Typography class="m-2 font-mono" variant="item-title">Favourite Book</Typography>
<div class="m-4 grid grid-cols-8">
  <BookTile value={book} />
</div>
<Typography class="m-2 font-mono" variant="item-title">Favourite Person</Typography>
<div class="m-4 grid grid-cols-12">
  <PersonTile value={person} />
</div>
<Typography class="m-2 font-mono" variant="item-title">Favourite Video</Typography>
<div class="m-4 grid grid-cols-6">
  <VideoTile value={video} />
</div>
<Typography class="m-2 font-mono" variant="item-title">Favourite Media</Typography>
<div class="m-4 grid grid-cols-12">
  <MediaTile value={media} />
</div>