"use client";
import { useRouter, useSearchParams } from "next/navigation";
import { useState, useEffect } from "react";
import Link from "next/link";
import { clients } from "../../datas/clients";

export default function FilterableList() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [filter, setFilter] = useState("All");

  useEffect(() => {
    router.replace(`/portfolio?filter=${filter}`, { scroll: false });
  }, [filter]);

  useEffect(() => {
    const queryFilter = searchParams.get("filter") || "All";
    setFilter(queryFilter);
  }, [searchParams]);

  const handleFilterChange = (e) => {
    const newFilter = e.target.value;
    setFilter(newFilter);
    router.replace(`/portfolio?filter=${newFilter}`, { scroll: false });
  };
  return (
    <div>
      {/* Mobile */}

      <div className="row justify-content-start">
        {clients.map((q) => (
          <div
            className={
              filter === "All" ||
              filter === "Restaurants" ||
              filter === "Startups"
                ? "col-xl-3 col-lg-4 col-md-6 col-sm-8 mb-3"
                : "display-none"
            }
          >
            <div className="services-item shine-animate-item">
              <div className="services-thumb">
                <Link href={q.link} className="shine-animate">
                  <img
                    src={`/assets/img/custom/clients-new/${q.image}`}
                    style={{ height: "200px" }}
                  />
                </Link>
              </div>
              <div className="services-content">
                <h4 className="title" style={{ minHeight: "50px" }}>
                  <Link href={q.link}>{q.name}</Link>
                </h4>
                <p>{q.description}</p>
                <Link href={q.link} className="btn">
                  View Website
                </Link>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}