'use client';

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import PaginationPages from "../pagination/PaginationPages";
import aziza from "../../../public/assets/home/aziza.webp";
import arrow from "../../../public/assets/icons/arrow-right.svg";
import leftArrow from "../../../public/assets/icons/arrow-left.svg";

interface Developer {
  slug: string;
  image?: { image: string }; // adjust to your real shape
  locales?: { name: string };
  properties_count?: number;
}

interface DeveloperCardProps {
  developersArray: Developer[];
}

export default function DeveloperCard({ developersArray }: DeveloperCardProps) {
  const [posts, setPosts] = useState<Developer[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const postsPerPage = 6;

  useEffect(() => {
    if (Array.isArray(developersArray)) {
      setPosts(developersArray);
    }
  }, [developersArray]);

  // Pagination logic
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  const paginate = (page: number) => setCurrentPage(page);

  const t = useTranslations("FeaturedSection");
  const pathname = usePathname();
  const locale = pathname.split("/")[1] || "en";

  return (
    <div className="flex flex-col gap-[100px]">
      <div
        className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-5"
        data-aos="fade-up"
        data-aos-duration="1500"
        data-aos-delay="300"
      >

    
        {currentPosts.map((item, idx) => {
          const slug = item.slug;
          const imgSrc = item.image?.image ?? aziza;

          return (
            <div
              key={slug || idx}
              className="flex flex-col shadow-[0px_8px_18px_rgba(156,156,156,0.10)] rounded-2xl overflow-hidden"
            >
              <div className="h-[275px] overflow-hidden">
                <Image
                  src={imgSrc}
                  alt={item.locales?.name || "developer"}
                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                  width={293}
                  height={209}
                />
              </div>

              <div className="p-4 flex-1 flex flex-col justify-between">
                <div>
                  <h3 className="text-[18px] sm:text-[20px] lg:text-[24px] font-normal text-dark line-clamp-1">
                    {item.locales?.name}
                  </h3>
                  <div className="flex items-center gap-2 text-[14px] text-paragraph font-light mt-1">
                    <span>{item.properties_count ?? 0}</span>
                    <span>{t("properties")}</span>
                  </div>
                </div>

                <div className="mt-4">
                  {locale === "en" ? (
                    <div className="flex justify-end items-center gap-2">
                      <Link
                        href={`/${locale}/developers/${slug}`}
                        className="text-primary text-[15px] lg:text-[20px] font-light"
                      >
                        {t("explore properties")}
                      </Link>
                      <Image
                        src={arrow}
                        alt="arrow right"
                        className="w-[18px] h-[18px] lg:w-[24px] lg:h-[24px]"
                      />
                    </div>
                  ) : (
                    <div className="flex justify-start items-center gap-2">
                      <Image
                        src={leftArrow}
                        alt="arrow left"
                        className="w-[18px] h-[18px] lg:w-[24px] lg:h-[24px]"
                      />
                      <Link
                        href={`/${locale}/developers/${slug}`}
                        className="text-primary text-[15px] lg:text-[20px] font-light"
                      >
                        {t("explore properties")}
                      </Link>
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
            </div>

      <PaginationPages
        postsPerPage={postsPerPage}
        totalPosts={posts.length}
        paginate={paginate}
        currentPage={currentPage}
      />
    </div>
  );
}