"use client";

import { useRef } from "react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import type { Project } from "@/lib/contentTypes";
import ProjectImage from "./ui/ProjectImage";
import Reveal from "./ui/Reveal";

/** Carousel horizontal karya dengan navigasi panah. */
export default function RecentWorks({ projects }: { projects: Project[] }) {
  const trackRef = useRef<HTMLDivElement>(null);

  const scrollBy = (dir: 1 | -1) => {
    const el = trackRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * el.clientWidth * 0.75, behavior: "smooth" });
  };

  return (
    <section className="mx-auto max-w-6xl px-5 py-24 md:px-8 md:py-32">
      <div className="mb-10 flex items-end justify-between gap-6">
        <Reveal>
          <span className="inline-flex items-center gap-2 rounded-full border border-line bg-panel px-4 py-1.5 font-accent text-[11px] tracking-[0.18em] text-mist uppercase">
            <span className="size-1 rounded-full bg-fg" />
            Portofolio Lengkap
          </span>
          <h2 className="mt-5 text-3xl font-semibold tracking-tight text-fg md:text-4xl">
            Jelajahi seluruh karya
          </h2>
        </Reveal>

        {/* Navigasi panah */}
        <Reveal delay={0.1} className="flex gap-2.5">
          <button
            onClick={() => scrollBy(-1)}
            aria-label="Sebelumnya"
            className="glow-border grid size-11 place-items-center rounded-full text-fg transition-colors hover:bg-panel-strong"
          >
            <ArrowLeft size={17} />
          </button>
          <button
            onClick={() => scrollBy(1)}
            aria-label="Berikutnya"
            className="glow-border grid size-11 place-items-center rounded-full text-fg transition-colors hover:bg-panel-strong"
          >
            <ArrowRight size={17} />
          </button>
        </Reveal>
      </div>

      <Reveal delay={0.1}>
        <div
          ref={trackRef}
          className="flex snap-x snap-mandatory gap-5 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
        >
          {projects.map((project) => (
            <a
              key={project.title}
              href="#kontak"
              className="group w-[270px] shrink-0 snap-start overflow-hidden rounded-3xl border border-line bg-surface transition-colors hover:border-line-2 md:w-[300px]"
            >
              <ProjectImage
                title={project.title}
                tone={project.tone}
                image={project.image}
                className="aspect-[4/3] w-full transition-transform duration-700 group-hover:scale-[1.04]"
              />
              <div className="p-4">
                <h3 className="line-clamp-2 text-sm font-semibold text-fg">
                  {project.title}
                </h3>
                <p className="mt-1 truncate font-accent text-[11px] tracking-wide text-mist uppercase">
                  {project.client} · {project.type}
                </p>
              </div>
            </a>
          ))}
        </div>
      </Reveal>
    </section>
  );
}