import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 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 ContestTable from "../../../../contest/components/contest-table";
import AudioSliderPage from "../../audio/audio";
import TeksSliderPage from "../../document/teks";
import ImageSliderPage from "../../image/image";
import VideoSliderPage from "../../video/audio-visual";
import TeksAll from "./teks";

const DocumentAllPage = () => {
  return (
    <div>
      <SiteBreadcrumb />
      <div className="my-3">
        <Tabs defaultValue="giat-routine" className="w-full">
          <Card className="py-3 px-2 my-4 h-20 flex items-center">
            <p className="text-lg font-semibold ml-2">Konten Teks</p>
          </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="flex justify-between items-center mx-3">
                      <Label className="text-base">Teks</Label>
                    </div>
                    <div className="px-5 my-5">
                      <TeksAll />
                    </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">
                    <Label>Audio Visual</Label>
                    <div className="px-5 my-5">
                      <VideoSliderPage />
                    </div>
                    <Label>Audio</Label>
                    <div className="px-5 my-5">
                      <AudioSliderPage />
                    </div>
                    <Label>Foto</Label>
                    <div className="px-5 my-5">
                      <ImageSliderPage />
                    </div>
                    <Label>Teks</Label>
                    <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 DocumentAllPage;