---
import type { FavoritesSection } from '@/types/sections/favorites-section.types';

import BookTile from './book-tile.astro';
import MediaTile from './media-tile.astro';
import PersonTile from './person-tile.astro';
import VideoTile from './video-tile.astro';
import SectionCard from '@/web/components/section-card.astro';
import FavoritesSubSection from './favorites-sub-section.astro';

export interface Props extends FavoritesSection {}

const { config, books, medias, people, videos } = Astro.props;
---

<SectionCard {...config}>
  <div class="flex flex-col gap-16">
    <FavoritesSubSection minTileWidth={160} subSection={books}>
      {books?.data.map((book) => <BookTile {...book} />)}
    </FavoritesSubSection>
    <FavoritesSubSection minTileWidth={120} subSection={people}>
      {people?.data.map((person) => <PersonTile {...person} />)}
    </FavoritesSubSection>
    <FavoritesSubSection minTileWidth={204} subSection={videos}>
      {videos?.data.map((video) => <VideoTile {...video} />)}
    </FavoritesSubSection>
    <FavoritesSubSection minTileWidth={120} subSection={medias}>
      {medias?.data.map((media) => <MediaTile {...media} />)}
    </FavoritesSubSection>
  </div>
</SectionCard>
