---
import MainLayout from "../components/MainLayout.astro";
import HebeiMap from '../components/HebeiMap';
import { getCollection } from 'astro:content';

// 获取所有集合的数据
const attractions = await getCollection('attractions');
const culture = await getCollection('culture');
const cuisine = await getCollection('cuisine');
const travel = await getCollection('travel');

// 合并所有文章并提取需要的字段
const allArticles = [
  ...attractions.map(entry => ({
    title: entry.data.title,
    description: entry.data.description,
    city: entry.data.city,
    slug: `/attractions/${entry.slug}`,
    type: 'attractions'
  })),
  ...culture.map(entry => ({
    title: entry.data.title,
    description: entry.data.description,
    city: entry.data.city,
    slug: `/culture/${entry.slug}`,
    type: 'culture'
  })),
  ...cuisine.map(entry => ({
    title: entry.data.title,
    description: entry.data.description,
    city: entry.data.city,
    slug: `/cuisine/${entry.slug}`,
    type: 'cuisine'
  })),
  ...travel.map(entry => ({
    title: entry.data.title,
    description: entry.data.description,
    city: entry.data.city,
    slug: `/travel/${entry.slug}`,
    type: 'travel'
  }))
];
---

<MainLayout title="河北地图 - 文章导航">
  <main class="pt-16 md:pt-20 pb-4 md:pb-8">
    <div class="container mx-auto px-2 md:px-4">
      <p class="text-sm md:text-base text-gray-600 text-center mb-6">点击地图上的城市查看相关文章</p>
      <HebeiMap client:load articles={allArticles} />
    </div>
  </main>
</MainLayout> 