import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowRight, Rows, Search, UploadIcon } from "lucide-react";
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Link } from "@/components/navigation";
import { formatDateToIndonesian, generateLocalizedPath } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import { locale } from "dayjs";
import { useEffect, useState } from "react";
import { getListContent } from "@/service/landing/landing";
import GiatRoutine from "./giat-routine/video/audio-visual";
import VideoSliderPage from "./giat-routine/video/audio-visual";
import AudioSliderPage from "./giat-routine/audio/audio";
import ImageSliderPage from "./giat-routine/image/image";
import TeksSliderPage from "./giat-routine/document/teks";
import ContestTable from "../contest/components/contest-table";
import { useTranslations } from "next-intl";

const CuratedContentPage = () => {
  const t = useTranslations("Curation");
  return (
    <div>
      <SiteBreadcrumb />
      <div className="my-3">
        <Tabs defaultValue="giat-routine" className="w-full">
          <Card className="py-3 px-2 my-4">
            <p className="text-lg font-semibold ml-2">
              {t("content-curation", { defaultValue: "Content Curation" })}
            </p>
            <TabsList className="flex-wrap">
              <TabsTrigger
                value="giat-routine"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Giat Rutin
              </TabsTrigger>
              <TabsTrigger
                value="giat-penugasan"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Giat Penugasan
              </TabsTrigger>
              <TabsTrigger
                value="contest"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Lomba
              </TabsTrigger>
            </TabsList>
          </Card>
          <TabsContent value="giat-routine">
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-12 col-span-12">
                <Card>
                  <div className="flex justify-between items-center py-4 px-5">
                    <div>
                      <InputGroup merged>
                        <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
                          <Search className=" h-4 w-4 dark:text-white" />
                        </InputGroupText>
                        <Input
                          type="text"
                          placeholder="Search Judul..."
                          className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
                        />
                      </InputGroup>
                    </div>
                  </div>
                  <div className="ml-5 pb-3">
                    <div className="px-5 my-5">
                      <VideoSliderPage />
                    </div>
                    <div className="px-5 my-5">
                      <AudioSliderPage />
                    </div>
                    <div className="px-5 my-5">
                      <ImageSliderPage />
                    </div>
                    <div className="px-5 my-5">
                      <TeksSliderPage />
                    </div>
                  </div>
                </Card>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="giat-penugasan">
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-12 col-span-12">
                <Card>
                  <div className="flex justify-between items-center py-4 px-5">
                    <div>
                      <InputGroup merged>
                        <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
                          <Search className=" h-4 w-4 dark:text-white" />
                        </InputGroupText>
                        <Input
                          type="text"
                          placeholder="Search Judul..."
                          className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
                        />
                      </InputGroup>
                    </div>
                  </div>
                  <div className="ml-5 pb-3">
                    <div className="px-5 my-5">
                      <VideoSliderPage />
                    </div>

                    <div className="px-5 my-5">
                      <AudioSliderPage />
                    </div>

                    <div className="px-5 my-5">
                      <ImageSliderPage />
                    </div>

                    <div className="px-5 my-5">
                      <TeksSliderPage />
                    </div>
                  </div>
                </Card>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="contest">
            <Card>
              <div className="py-3">
                <ContestTable />
              </div>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
};

export default CuratedContentPage;