import { Project, projects } from "@/constants";
import { ArrowRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import MeCard from "../me-card";
import Heading from "../heading";

const ProjectCard = (p: Project) => (
  <Link
    href={p.link}
    className="flex gap-12 items-center w-full group"
    target="_blank"
  >
    {/* <div className="font-serif text-muted-foreground w-20">{`[ ${p.year} ]`}</div> */}
    <div className="flex items-center gap-4 cursor-pointer hover:bg-muted w-full rounded-xl relative">
      <div className="h-40 w-32 relative rounded-xl overflow-hidden">
        <Image
          src={p.image}
          alt="project-image"
          fill
          className="object-cover"
        />
      </div>
      <div className="space-y-1">
        <span className="text-xs text-muted-foreground ">{`[ ${p.year} ]`}</span>
        <h3 className="text-3xl font-black">{p.name}</h3>
        <p className="text-muted-foreground text-lg">{p.description}</p>
      </div>

      <ArrowRight className="size-6 text-primary absolute right-4 top-8 -rotate-45 group-hover:-translate-y-4 group-hover:translate-x-2 transition-all duration-300" />
    </div>
  </Link>
);

function Projects() {
  return (
    <div className="flex gap-8 container lg:px-20">
      <MeCard
        className=" sticky top-20"
        button={{
          label: "Contact Me",
          link: "/contact/#",
        }}
      />
      <div id="projects" className="space-y-8  w-full">
        <Heading title="Projects" subTitle="Recent" />
        <menu className=" flex flex-col items-center gap-8 pb-20 w-full">
          {projects.map((p) => (
            <li key={p.link} className="w-full">
              <ProjectCard {...p} />
            </li>
          ))}
        </menu>
      </div>
    </div>
  );
}

export default Projects;
