"use client";

import { useState, useMemo } from "react";
import { useTranslations } from "next-intl";
import { cn } from "@/lib/utils";
import { ProjectCard } from "./ProjectCard";
import type { FlatProject, ProjectType } from "@/lib/types";

const types: Array<ProjectType | "all"> = ["all", "product", "brand-system", "open-source", "creative-work"];

export function WorkListClient({ projects }: { projects: FlatProject[] }) {
  const [active, setActive] = useState<ProjectType | "all">("all");
  const tType = useTranslations("work.types");

  const filtered = useMemo(
    () => (active === "all" ? projects : projects.filter((p) => p.projectType === active)),
    [projects, active]
  );

  return (
    <div>
      {/* Type filter */}
      <div className="mb-8 flex flex-wrap gap-2">
        {types.map((type) => (
          <button
            key={type}
            onClick={() => setActive(type)}
            className={cn(
              "rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-200",
              active === type
                ? "bg-accent text-background"
                : "border border-border text-text-secondary hover:border-accent/40 hover:text-text-primary"
            )}
          >
            {tType(type)}
          </button>
        ))}
      </div>

      <p className="mb-6 font-mono text-xs text-text-secondary">{filtered.length} پروژه</p>

      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {filtered.map((project) => (
          <ProjectCard key={project.id} project={project} typeLabel={tType(project.projectType)} />
        ))}
      </div>
    </div>
  );
}
