"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { Project } from "@/lib/types";

interface Props {
  projects: Project[];
}

export default function PortfolioGrid({ projects }: Props) {
  const categories = ["All", ...new Set(projects.map((p) => p.category))];
  const [active, setActive] = useState("All");

  const filtered = active === "All"
    ? projects
    : projects.filter((p) => p.category === active);

  return (
    <div>
      {/* Filter Buttons */}
      <div className="flex flex-wrap justify-center gap-3 mb-10">
        {categories.map((category) => (
          <button
            key={category}
            onClick={() => setActive(category)}
            className={`px-4 py-2 rounded border text-sm font-medium ${
              active === category
                ? "bg-secondary text-primary border-blue-600"
                : "border-gray-300 text-gray-700 hover:bg-gray-200"
            }`}
          >
            {category}
          </button>
        ))}
      </div>

      {/* Grid */}
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {filtered.map((project) => (
          <Link
            key={project.slug}
            href={`/portfolio/${project.slug}`}
            className="block border-3 border-secondary rounded-lg overflow-hidden shadow hover:shadow-lg transition bg-white"
          >
            <div className="relative w-full h-48">
              <Image
                src={project.images[0]}
                alt={project.title}
                fill
                className="object-cover"
              />
            </div>

           <div className="p-4 h-full bg-gradient-to-b from-secondary/80 to-secondary/20 text-white">

              <h3 className="font-semibold text-lg">{project.title}</h3>
              <p className="text-sm text-gray-500 mb-1">{project.location}</p>
              <span className="inline-block text-xs font-mediu bg-primary text-white rounded px-2 py-1">
                {project.category}
              </span>
            </div>
          </Link>
        ))}
      </div>

      {/* Empty State */}
      {filtered.length === 0 && (
        <p className="text-center text-gray-500 mt-10">
          No projects found for this category.
        </p>
      )}
    </div>
  );
}