"use client";

import { useProfile } from "../../context/ProfileContext";
import { Navbar } from "../../components/Navbar";
import { Footer } from "../../sections/Footer";
import { ProjectCard } from "../../components/ProjectCard";

export default function ProjectsPage() {
  const { projects, loading } = useProfile();

  return (
    <>
      <Navbar />
      <div className="mx-auto w-full max-w-6xl px-4 pb-16 pt-28 sm:pb-20 sm:pt-32">
        <div className="mb-10 space-y-4 text-center sm:mb-14">
          <h1 className="text-4xl font-semibold text-white sm:text-5xl">Projects</h1>
          <p className="mx-auto max-w-2xl text-base text-gray-500 sm:text-lg">
            Everything I&apos;ve built and shipped — big and small.
          </p>
        </div>

        {loading ? (
          <p className="text-center text-gray-500">Loading projects…</p>
        ) : projects.length === 0 ? (
          <div className="rounded-2xl border border-white/10 bg-white/5 px-5 py-12 text-center text-gray-400">
            No projects published yet.
          </div>
        ) : (
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 sm:gap-8">
            {projects.map((project) => (
              <ProjectCard key={project.id} project={project} />
            ))}
          </div>
        )}
      </div>
      <Footer />
    </>
  );
}
