---
import { getCollection } from 'astro:content';
import Layout from '@layouts/ActivitiesList.astro';
import List from '@components/views/List.astro';
import Grid from '@components/views/Grid.astro';
import LayoutSwitcher from '@components/LayoutSwitcher.astro';

export async function getStaticPaths() {
  const posts = await getCollection('activities');
  const yearMonthCombos = [...new Set(posts.map(post => {
    const year = post.data.date.getFullYear();
    const month = (post.data.date.getMonth() + 1).toString().padStart(2, '0');
    return `${year}-${month}`;
  }))];

  return yearMonthCombos.map(combo => {
    const [year, month] = combo.split('-');
    return {
      params: { year, month },
      props: {
        year: parseInt(year),
        month: parseInt(month),
        posts: posts.filter(post => {
          const postYear = post.data.date.getFullYear();
          const postMonth = post.data.date.getMonth() + 1;
          return postYear === parseInt(year) && postMonth === parseInt(month);
        }).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
      },
    };
  });
}

const { year, month, posts } = Astro.props;
---
<Layout>
    <div class="container m-auto">
      
        <div class="navbar bg-base-100 border-b-2 border-neutral-200 pb-2 mb-2">
          <div class="flex-1">
            <h1 class="text-xl md:text-2xl">
              { year }
            </h1>
          </div>
          <div class="flex-0">
            <LayoutSwitcher />
          </div>
        </div>

        <Grid data={posts} type="activities" />
        
    </div>
</Layout>