"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { GroupsTable } from "@/components/groups/groups-table";
import { UsersTable } from "@/components/users/users-table";

interface ManagementTabsProps {
  userRole?: string[];
}

export function ManagementTabs({ userRole = [] }: ManagementTabsProps) {
  return (
    <div className="flex flex-col mt-8">
      <Tabs defaultValue="users">
        <div className="flex justify-between items-center mb-8">
          <TabsList className="bg-black/20 border-0">
            <TabsTrigger 
              value="users"
              className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-400"
            >
              Utilisateurs
            </TabsTrigger>
            <TabsTrigger 
              value="groups"
              className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-400"
            >
              Groupes
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="users">
          <UsersTable userRole={userRole} />
        </TabsContent>
        
        <TabsContent value="groups">
          <GroupsTable userRole={userRole} />
        </TabsContent>
      </Tabs>
    </div>
  );
}