mediahub-fe/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx

"use client";
import { Link } from "@/components/navigation";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { getListContent } from "@/service/landing/landing";
import {
  formatDateToIndonesian,
  generateLocalizedPath,
  textEllipsis,
} from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
  SortingState,
  ColumnFiltersState,
  VisibilityState,
  PaginationState,
} from "@tanstack/react-table";
import {
  useParams,
  usePathname,
  useRouter,
  useSearchParams,
} from "next/navigation";
import React, { Component, useEffect, useState } from "react";

const ImageSliderPage = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [imageData, setImageData] = useState<any>();
  const [displayImage, setDisplayImage] = useState<any[]>([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    fetchData();
  }, [page]);

  useEffect(() => {
    if (imageData?.length > 0) {
      shuffleAndSetVideos();
      const interval = setInterval(shuffleAndSetVideos, 5000);
      return () => clearInterval(interval); // Cleanup interval on unmount
    }
  }, [imageData]);

  const fetchData = async () => {
    const response = await getListContent({
      page: page - 1,
      size: 6,
      sortBy: "createdAt",
      contentTypeId: "1",
    });
    console.log(response);

    const data = response?.data?.data;
    const contentData = data?.content;
    setImageData(contentData);
  };

  const shuffleAndSetVideos = () => {
    const shuffled = shuffleArray([...imageData]);
    setDisplayImage(shuffled.slice(0, 3));
  };

  const shuffleArray = (array: any[]) => {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  };
  return (
    <div className="mx-3 px-5">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {displayImage?.map((image: any) => (
          <Card
            key={image?.id}
            className="hover:sc ale-110 transition-transform duration-300"
          >
            <Link
              href={`/shared/curated-content//giat-routine/image/detail/${image.id}`}
            >
              <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                <img
                  src={image?.thumbnailLink}
                  className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg"
                />
                <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                  {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
                  {image?.timezone ? image?.timezone : "WIB"}|{" "}
                  <Icon icon="formkit:eye" width="15" height="15" />
                  {image?.clickCount}{" "}
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="1em"
                    height="1em"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fill="#f00"
                      d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
                    />
                  </svg>{" "}
                </div>
                <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
                  {image?.title}
                </div>
              </CardContent>
            </Link>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default ImageSliderPage;