import { StatisticsBlock } from "@/components/blocks/statistics-block";
import DashboardDropdown from "@/components/dashboard-dropdown";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import InternalTable from "./internal/table-internal/internal-table";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import EscalationTable from "./escalation/table-escalation/escalation-table";
import CollaborationTable from "./collaboration/table-collaboration/collabroation-table";

const CommunicationPage = async () => {
  return (
    <div>
      <SiteBreadcrumb />
      <div className="my-3">
        <Tabs defaultValue="internal" className="w-full">
          <Card className="py-3 px-2 my-4">
            <p className="text-lg font-semibold ml-2">Komunikasi</p>
            <TabsList className="flex-wrap">
              <TabsTrigger
                value="internal"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Pertanyaan Internal
              </TabsTrigger>
              <TabsTrigger
                value="escalation"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Eskalasi
              </TabsTrigger>
              <TabsTrigger
                value="collaboration"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Kolaborasi
              </TabsTrigger>
            </TabsList>
          </Card>
          <TabsContent value="internal">
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-12 col-span-12">
                <Card>
                  <CardContent className="p-0">
                    <InternalTable />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="escalation">
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-12 col-span-12">
                <Card>
                  <CardContent className="p-0">
                    <EscalationTable />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="collaboration">
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-12 col-span-12">
                <Card>
                  <CardContent className="p-0">
                    <CollaborationTable />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
};

export default CommunicationPage;