"use client";
import { Link } from "@/components/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Label } from "@/components/ui/label";
import { listCuratedContent } from "@/service/curated-content/curated-content";
import { getListContent } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import image from "next/image";
import React, { useEffect, useState } from "react";

type VideoData = {
  id: string;
  title: string;
  createdAt: string;
  timezone: string;
  thumbnailLink: string;
  clickCount: string;
};

const VideoSliderPage = () => {
  const [allVideoData, setAllVideoData] = useState<any[]>([]);
  const [videoData, setVideoData] = useState<VideoData[]>([]);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = React.useState(10);
  const [search, setSearch] = React.useState("");

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

  const fetchData = async () => {
    const response = await listCuratedContent(search, limit, page - 1, 2, "1");
    console.log(response);

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

  return (
    <div className="w-full px-2">
      {videoData.length > 0 && (
        <div>
          <div className="flex justify-between items-center mb-2">
            <h2 className="text-xl font-semibold">Video</h2>
            <Link
              href={"/shared/curated-content/giat-routine/video/all"}
              className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
            >
              Lihat Semua <Icon icon="lucide:arrow-right" className="ml-1" />
            </Link>
          </div>
          <Carousel className="w-full">
            <CarouselContent>
              {videoData.map((video, index) => (
                <CarouselItem key={index} className="md:basis-1/3 lg:basis-1/3">
                  <div className="p-2">
                    <Card className="shadow-md rounded-lg overflow-hidden">
                      <Link
                        href={`/shared/curated-content/giat-routine/video/detail/${video.id}`}
                      >
                        <CardContent className="p-0">
                          <img
                            src={video?.thumbnailLink}
                            alt={video?.title}
                            className="w-full h-56 object-cover rounded-t-lg"
                          />
                          <div className="p-3">
                            <p className="text-xs text-gray-500">
                              {formatDateToIndonesian(
                                new Date(video?.createdAt)
                              )}{" "}
                              {video?.timezone || "WIB"} |
                              <Icon
                                icon="formkit:eye"
                                width="15"
                                height="15"
                                className="inline ml-1"
                              />
                              {video?.clickCount}
                            </p>
                            <h3 className="font-semibold text-sm truncate">
                              {video?.title}
                            </h3>
                          </div>
                        </CardContent>
                      </Link>
                    </Card>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious />
            <CarouselNext />
          </Carousel>
        </div>
      )}
    </div>
  );
};

export default VideoSliderPage;