import React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Card, CardContent } from "../ui/card";
import Link from "next/link";
import { useState } from "react";

const dummyImage = [
  { id: 1, thumbnail: "/assets/banner-sample.png" },
  { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
  { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
  { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
  { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
];

const KontenTerpopuler = () => {
  const [selectedTab, setSelectedTab] = useState("video");
  return (
    <div className="w-full">
      <div className="space-x-5 flex flex-col  p-4">
        <div className="flex px-10 flex-col lg:flex-row gap-5 mb-4">
          <h2 className="flex items-center text-sm lg:text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
            <span className="text-black ">Konten </span> Terpopuler
          </h2>
          <Tabs value={selectedTab} onValueChange={setSelectedTab}>
            <TabsList>
              <TabsTrigger value="video" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
                Audio Visual
              </TabsTrigger>
              <TabsTrigger value="audio" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
                Audio
              </TabsTrigger>
              <TabsTrigger value="image" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
                Foto
              </TabsTrigger>
              <TabsTrigger value="teks" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
                Teks
              </TabsTrigger>
            </TabsList>
          </Tabs>
        </div>
        <div className="px-10">
          {selectedTab == "video" ? (
            <Carousel>
              <CarouselContent>
                {dummyImage.map((image) => (
                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                    <Card>
                      <CardContent className="flex items-center justify-center">
                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                      </CardContent>
                    </Card>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious />
              <CarouselNext />
            </Carousel>
          ) : selectedTab == "audio" ? (
            <Carousel>
              <CarouselContent>
                {dummyImage.map((image) => (
                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                    <Card>
                      <CardContent className="flex items-center justify-center">
                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                      </CardContent>
                    </Card>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious />
              <CarouselNext />
            </Carousel>
          ) : selectedTab == "image" ? (
            <Carousel>
              <CarouselContent>
                {dummyImage.map((image) => (
                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                    <Card>
                      <CardContent className="flex items-center justify-center">
                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                      </CardContent>
                    </Card>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious />
              <CarouselNext />
            </Carousel>
          ) : (
            <Carousel>
              <CarouselContent>
                {dummyImage.map((image) => (
                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                    <Card>
                      <CardContent>
                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                      </CardContent>
                    </Card>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious />
              <CarouselNext />
            </Carousel>
          )}
        </div>
      </div>
      <div className="flex items-center flex-row justify-center">
        <Link href="#" className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]">
          LIHAT SEMUA
        </Link>
      </div>
    </div>
  );
};

export default KontenTerpopuler;