"use client";
import { Link } from "@/components/navigation";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { getListContent } from "@/service/landing/landing";
import { formatDateToIndonesian, generateLocalizedPath } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import { useParams, usePathname, useRouter } from "next/navigation";
import React, { Component, useEffect, useState } from "react";

const VideoSliderPage = () => {
  const [newContent, setNewContent] = useState<any>();
  const [selectedTab, setSelectedTab] = useState("video");
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const locale = params?.locale;
  const type = "popular";
  useEffect(() => {
    initFetch();
  });
  const initFetch = async () => {
    const request = {
      sortBy: type == "popular" ? "clickCount" : "createdAt",
      contentTypeId: "2",
    };
    const response = await getListContent(request);
    console.log("category", response);
    setNewContent(response?.data?.data?.content);
  };
  return (
    <div className="mx-3 px-5">
      <Carousel className="w-full max-w-7xl mx-auto ">
        <CarouselContent>
          {newContent?.map((video: any) => (
            <CarouselItem
              key={video?.id}
              className="md:basis-1/2 lg:basis-1/3 "
            >
              <Link
                href={generateLocalizedPath(
                  `/video/detail/${video?.id}`,
                  String(locale)
                )}
                className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
              >
                <img
                  src={video?.thumbnailLink}
                  className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300 rounded-md"
                />
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-black to-slate-500 text-white p-2">
                  <h1 className="text-sm font-semibold truncate">
                    {video?.title}
                  </h1>
                  <p className="flex flex-row items-center text-sm gap-2">
                    {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
                    {video?.timezone ? video?.timezone : "WIB"} |{" "}
                    <Icon icon="formkit:eye" width="15" height="15" />{" "}
                    {video.clickCount}{" "}
                  </p>
                </div>
              </Link>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  );
};

export default VideoSliderPage;
