---
import GiteaProjectCard from "./GiteaProjectCard.astro";
import { ArrowRight } from "@lucide/astro";
import repos from "../data/repos.json";

const latestRepos = repos.slice(0, 3);
---

<section id="projects" class="py-20 px-4">
  <div class="max-w-6xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-bold mb-4">Check out my latest work</h2>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {
        latestRepos.map((repo) => (
          <GiteaProjectCard displayBanner={false} repo={repo} />
        ))
      }
    </div>

    <div class="text-center mt-12">
      <a href="/projects" class="btn btn-ghost gap-2">
        View All Projects
        <ArrowRight class="size-4" />
      </a>
    </div>
  </div>
</section>