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} target="_blank">
    <div className="group max-w-xs lg:max-w-none mx-auto md:mx-0 flex flex-col lg:flex-row items-center gap-4 cursor-pointer hover:bg-muted w-full rounded-xl relative">
      <div className="h-40 w-full lg:max-w-32 relative rounded-xl overflow-hidden">
        <Image
          src={p.image}
          alt="project-image"
          fill
          className="object-cover"
        />
      </div>
      <div className="space-y-1 w-full p-4">
        <span className="text-xs text-muted-foreground ">{`[ ${p.year} ]`}</span>
        <h3 className="text-2xl md:text-3xl font-black">{p.name}</h3>
        <p className="text-muted-foreground text-sm md:text-lg">
          {p.description}
        </p>
      </div>

      <ArrowRight className="size-6 text-primary absolute bottom-4 right-4 lg: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 flex-col md:flex-row gap-8 container lg:px-20">
      <MeCard className="mx-auto order-last md:order-first md:sticky md:top-20" />
      <div className="space-y-8  w-full p-4">
        <Heading
          title="Projects"
          subTitle="Recent"
          // className="sticky top-0 z-50 pb-6"
        />
        <menu className=" flex flex-col items-center gap-8 lg:pb-20 w-full">
          {projects.map((p) => (
            <li key={p.link} className="w-full">
              <ProjectCard {...p} />
            </li>
          ))}
        </menu>
      </div>
    </div>
  );
}

export default Projects;