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

export interface Props {
  subSection?: SubSection;
  minTileWidth: number;
}

const { subSection, minTileWidth } = Astro.props;
---

{
  subSection && (
    <div class="flex flex-col gap-6">
      <Typography variant="section-subtitle">{subSection.title}</Typography>
      <div class="tile grid gap-8" style={{ '--min-tile-width': `${minTileWidth}px` }}>
        <slot />
      </div>
    </div>
  )
}

<style>
  .tile {
    grid-template-columns: repeat(auto-fill, minmax(var(--min-tile-width), 1fr));
  }
</style>