import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import InternalTable from "./internal/components/internal-table";
import SiteBreadcrumb from "@/components/site-breadcrumb";

import CollaborationTable from "./collaboration/components/collabroation-table";
import EscalationTable from "./escalation/components/escalation-table";

const CommunicationPage = () => {
  return (
    <div>
      <SiteBreadcrumb />
      <div className="my-3">
        <Card className="py-3 px-2 my-4">
          <Tabs defaultValue="internal" className="w-full">
            <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>

            <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>
        </Card>
      </div>
    </div>
  );
};

export default CommunicationPage;