"use client";

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

const AudioTabs = () => {
  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
              </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">
            <TableAudio />
          </div>
        </TabsContent>
        
        {/* <TabsContent value="pending" className="mt-0">
          <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
            <PendingApprovalTable typeId={4} />
          </div>
        </TabsContent> */}
      </Tabs>
    </div>
  );
};

export default AudioTabs;