"use client";

import * as React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import PendingApprovalTable from "./pending-approval-table";
import TableVideo from "./table-video";

const AudioVisualTabs = () => {
  const [activeTab, setActiveTab] = React.useState("submitted");

  return (
    <div className="w-full">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        {/* <div className="flex items-center justify-between mb-6">
          <TabsList className="inline-flex h-10 bg-gray-50 border border-gray-200 p-1 rounded-lg shadow-sm">
            <TabsTrigger 
              value="submitted"
              className="text-sm font-medium px-6 py-2 h-8 rounded-md transition-all duration-200 data-[state=active]:bg-white data-[state=active]:text-blue-600 data-[state=active]:shadow-sm data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:text-gray-800"
            >
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-green-500"></div>
                Submitted Audio-Visual
              </div>
            </TabsTrigger>
            <TabsTrigger 
              value="pending"
              className="text-sm font-medium px-6 py-2 h-8 rounded-md transition-all duration-200 data-[state=active]:bg-white data-[state=active]:text-orange-600 data-[state=active]:shadow-sm data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:text-gray-800"
            >
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-orange-500"></div>
                Waiting Approval
              </div>
            </TabsTrigger>
          </TabsList>
        </div> */}
        
        <TabsContent value="submitted" className="mt-0">
          <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
            <TableVideo />
          </div>
        </TabsContent>
        
        {/* <TabsContent value="pending" className="mt-0">
          <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
            <PendingApprovalTable typeId={2} />
          </div>
        </TabsContent> */}
      </Tabs>
    </div>
  );
};

export default AudioVisualTabs;