import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import InternalTable from "../communication/internal/table-internal/internal-table";
import EscalationTable from "../communication/escalation/table-escalation/escalation-table";
import CollaborationTable from "../communication/collaboration/table-collaboration/collabroation-table";
import { Button } from "@/components/ui/button";
import { Search, UploadIcon } from "lucide-react";
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
import { Input } from "@/components/ui/input";

const CuratedContentPage = async () => {
  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">Kurasi Konten</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>
                </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>
                </Card>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="contest">
            <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>
                </Card>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
};

export default CuratedContentPage;