---
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>
      <p class="text-lg text-base-content/70">
        I enjoy the challenge of reimagining existing programs & scripts in my
        own unique way.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {latestRepos.map((repo) => <GiteaProjectCard 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>