"use client";

import Link from "next/link";
import { useProfile } from "../context/ProfileContext";
import { ProjectCard } from "../components/ProjectCard";

// Homepage teaser: the first 3 projects (ordered by size then name, per the API)
// plus a button through to the full /projects page.
export function FeaturedProjects() {
  const { projects, loading } = useProfile();
  const top = projects.slice(0, 3);

  return (
    <section className="mx-auto w-full max-w-6xl space-y-8 px-4 sm:space-y-10">
      <div className="space-y-3 text-center">
        <h2 className="text-3xl font-semibold text-white sm:text-4xl">Featured Projects</h2>
        <p className="mx-auto max-w-2xl text-sm text-gray-500 sm:text-base">
          A few things I&apos;ve been building lately.
        </p>
      </div>

      {loading ? (
        <p className="text-center text-gray-500">Loading projects…</p>
      ) : top.length === 0 ? (
        <div className="rounded-2xl border border-white/10 bg-white/5 px-5 py-8 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">
          {top.map((project) => (
            <ProjectCard key={project.id} project={project} />
          ))}
        </div>
      )}

      <div className="flex justify-center">
        <Link
          href="/projects"
          className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:border-white/30 hover:bg-white/10"
        >
          View all projects
          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
          </svg>
        </Link>
      </div>
    </section>
  );
}