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";
import { getTranslations } from "next-intl/server";
import { GlowEffect } from "../ui/glow-effect";

const ProjectCard = (p: any) => (
  <Link href={p.link} target="_blank">
    <div className="group max-w-xs pl-4 pt-4 lg:max-w-none mx-auto md:mx-0 flex flex-col lg:flex-row  gap-4 cursor-pointer hover:bg-accent 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-fill" />
      </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.title}</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>
);

export default async function Projects() {
  const t = await getTranslations();
  const projects = Array.from({ length: 2 }).map((_, idx) => ({
    title: t(`projects.${idx}.title` as any),
    description: t(`projects.${idx}.description` as any),
    year: t(`projects.${idx}.year` as any),
    image: t(`projects.${idx}.image` as any),
    link: t(`projects.${idx}.link.live` as any),
  }));
  return (
    <>
      <div className="flex flex-col md:flex-row gap-8 container ">
        <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, idx) => (
              <li key={idx} className="w-full">
                <ProjectCard {...p} />
              </li>
            ))}
          </menu>
        </div>
      </div>
    </>
  );
}
