"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import WorkCard from "./work-card";
import WorkPagination from "./work-pagination";
import { FadeIn } from "../ui/fade-in";

const ITEMS_PER_PAGE = 9;

export default function OurWorkContent() {
  const t = useTranslations("ourWorks");
  const [currentPage, setCurrentPage] = useState(1);

  const mockWorks = Array.from({ length: 27 }, (_, i) => ({
    id: i + 1,
    title: t("workTitle"),
    description: t("workDescription"),
    image:
      i % 3 === 0
        ? "/images/works/work1.jpg"
        : i % 3 === 1
        ? "/images/works/work2.jpg"
        : "/images/works/work3.jpg",
    imageAlt: `${t("workTitle")} ${i + 1}`,
  }));

  const totalPages = Math.ceil(mockWorks.length / ITEMS_PER_PAGE);
  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
  const endIndex = startIndex + ITEMS_PER_PAGE;
  const currentWorks = mockWorks.slice(startIndex, endIndex);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);

    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <section className="w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-[120px] pt-12 sm:pt-14 md:pt-16 pb-20 sm:pb-24 md:pb-28 lg:pb-32 bg-white">
      <div className="flex flex-col gap-10 w-full">

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
          {currentWorks.map((work, index) => (
            <FadeIn key={work.id} delay={0.2 * index}>
            <WorkCard
              key={work.id}
              title={work.title}
              description={work.description}
              image={work.image}
              imageAlt={work.imageAlt}
            />
            </FadeIn>
          ))}
        </div>

        {totalPages > 1 && (
          <WorkPagination
            currentPage={currentPage}
            totalPages={totalPages}
            totalItems={mockWorks.length}
            itemsPerPage={ITEMS_PER_PAGE}
            onPageChange={handlePageChange}
          />
        )}
      </div>
    </section>
  );
}