"use client";

import { UserPlus, UserMinus, Users } from "lucide-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import CreateUser from "./create-user";
import DeleteUser from "./delete-user";

export default function UserManagement() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Users className="h-6 w-6" />
          Gestion des Utilisateurs
        </CardTitle>
      </CardHeader>
      <CardContent>
        <Accordion type="single" collapsible className="w-full">
          <AccordionItem value="create-user">
            <AccordionTrigger className="text-left">
              <div className="flex items-center gap-2">
                <UserPlus className="h-5 w-5 text-green-600" />
                <span>Créer un nouvel utilisateur</span>
              </div>
            </AccordionTrigger>
            <AccordionContent>
              <div className="pt-4">
                <CreateUser />
              </div>
            </AccordionContent>
          </AccordionItem>

          <AccordionItem value="delete-user">
            <AccordionTrigger className="text-left">
              <div className="flex items-center gap-2">
                <UserMinus className="h-5 w-5 text-red-600" />
                <span>Supprimer un utilisateur</span>
              </div>
            </AccordionTrigger>
            <AccordionContent>
              <div className="pt-4">
                <DeleteUser />
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </CardContent>
    </Card>
  );
}