---
import Layout from "../../layouts/Layout.astro";
import GiteaProjectCard from "../../components/GiteaProjectCard.astro";
import { ChevronLeft } from "@lucide/astro";

import repos from "../../data/repos.json";
---

<Layout
  title="Projects - Another Hadi"
  description="Explore my latest projects and work"
>
  <main class="max-w-6xl mx-auto px-4 py-20">
    <div class="text-center mb-16">
      <h1 class="text-5xl font-bold mb-4">Projects</h1>
      <p class="text-xl text-base-content/70">
        I enjoy the challenge of reimagining existing programs & scripts in my
        own unique way.
      </p>
    </div>

    <div class="mb-8">
      <a href="/" class="btn btn-ghost btn-sm">
        <ChevronLeft size={18} />
        Back to Home
      </a>
    </div>

    {
      repos.length === 0 ? (
        <div class="text-center py-20">
          <p class="text-2xl text-base-content/60">
            No projects found. Check back soon!
          </p>
        </div>
      ) : (
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {repos.map((repo) => (
            <GiteaProjectCard repo={repo} />
          ))}
        </div>
      )
    }
  </main>
</Layout>