"use client";

import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import WorkCard from "./WorkCard";
import { caseStudies, workCategories } from "@/lib/content/work";

export default function WorkGrid() {
  const [filter, setFilter] = useState<string>("all");
  const reduced = useReducedMotion();

  const visible = caseStudies.filter((c) => filter === "all" || c.category === filter);

  return (
    <>
      <div role="group" aria-label="Filter projects" className="flex flex-wrap gap-2.5">
        {workCategories.map((cat) => {
          const active = filter === cat.key;
          return (
            <button
              key={cat.key}
              onClick={() => setFilter(cat.key)}
              aria-pressed={active}
              className={`rounded-full border px-4 py-2 font-[family-name:var(--font-mono)] text-[0.8rem] tracking-[0.08em] transition-all ${
                active
                  ? "border-azure bg-azure font-medium text-[#04122B]"
                  : "border-white/15 text-tmid hover:border-ice hover:text-ice-soft"
              }`}
            >
              {cat.label}
            </button>
          );
        })}
      </div>

      <motion.div layout={!reduced} className="mt-12 grid grid-cols-1 gap-7 lg:grid-cols-2">
        <AnimatePresence mode="popLayout">
          {visible.map((cs) => (
            <motion.div
              key={cs.slug}
              layout={!reduced}
              initial={reduced ? false : { opacity: 0, y: 16, scale: 0.985 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={reduced ? undefined : { opacity: 0, scale: 0.985 }}
              transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
            >
              <WorkCard cs={cs} />
            </motion.div>
          ))}
        </AnimatePresence>
      </motion.div>
    </>
  );
}