import ProjectCard from "@/components/project-card";
import { getProjects } from "@/services/projects-service";
import Image from "next/image";
import Link from "next/link";

import ProfileImage from "../../../../public/images/liam_pietralla.jpg";

const ProjectsPage = async () => {
  const projects = await getProjects();
  return (
    <div className="flex flex-col gap-4 justify-center items-center my-15">
      <div className="flex flex-row items-center gap-2 my-2 animate-fade-in-up">
        <Image src={ProfileImage} alt="Liam Pietralla" className="rounded-full max-w-[50px]" />
        <Link href="/" className="group leading-relaxed font-semi-bold">
          Liam Pietralla
          <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-accent"></span>
        </Link>
      </div>
      <h1 className="text-5xl font-bold animate-fade-in-up" style={{ animationDelay: "120ms" }}>Projects</h1>
      <h2 className="animate-fade-in-up text-center max-w-2xl" style={{ animationDelay: "240ms" }}>
        A collection of interesting projects that I am working on currently or have worked on in the past.
      </h2>
      <div className="flex flex-col gap-4 w-full">
        {projects.docs.map((project, index) => (
          <div key={index} className="animate-fade-in-up" style={{ animationDelay: `${320 + index * 120}ms` }}>
            <ProjectCard {...project} />
          </div>
        ))}
      </div>
    </div>
  )
}

export default ProjectsPage;