---
import works from "@/collections/works.json";
import WorkCard from "@/components/cards/WorkCard.astro";

interface Props {
  limit?: number; // 限制显示的项目数量
}

interface Work {
  name: string;
  description?: string;
  image: string;
  url: string;
  tags?: string[];
  video?: string;
  isShow?: boolean;
}

const { limit } = Astro.props;

// 获取项目列表
let allWorks = works as Work[];

// 如果指定了 limit，使用 limit
if (limit !== undefined) {
  allWorks = works.slice(0, limit) as Work[];
}
---

<section class="py-8 md:py-8">
  <div class="space-y-8 md:space-y-10">
    <!-- 所有项目全宽显示 -->
    {allWorks
      .filter(work => work.isShow !== false)
      .map((work, index) => (
        <WorkCard
          name={work.name}
          description={work.description}
          image={work.image}
          url={work.url}
          tags={work.tags}
          video={work.video}
          isShow={work.isShow}
          layout="featured"
          index={index}
        />
      ))}
  </div>
</section>

