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

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">
        <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-white"></span>
        </Link>
      </div>
      <h1 className="text-5xl font-bold">Projects</h1>
      <h2>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">
        {projects.docs.map((project, index) => (
          <Fragment key={index}>
            <ProjectCard {...project} />
            {index < projects.docs.length - 1 && <Rule />}
          </Fragment>
        ))}
      </div>
    </div>
  )
}

export default ProjectsPage;