import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import { FaPlus, FaCircle } from "react-icons/fa";
import { api } from "../API/api";
import { useLoading } from "../Context/LoadingContext";
import PartnersCardComponent from "../Components/PartnersPageCardComponent";
import ClientsCardComponent from "../Components/ClientsPageCardComponent";
import NewMappingCardComponent from "../Components/NewMappingCardComponent copy";

const NewAdConfiguration = () => {
    const [clients, setClients] = useState([]);
    const [upd, setUpd] = useState(0);
    const navigate = useNavigate();
    const { setLoading } = useLoading();

    useEffect(() => {
        const fetchClients = async () => {
            try {
                setLoading(true);
                const response = await api.get("/admin/clients");

                setClients(response);


            } catch (error) {
                console.error("Error fetching clients:", error);
            } finally {
                setLoading(false);
            }
        };
        fetchClients();
    }, [upd]);

    return (
        <div className="min-h-screen bg-gray-900 text-white p-8">
            <motion.h1
                className="text-3xl font-bold text-center mb-8"
                initial={{ opacity: 0, y: -20 }}
                animate={{ opacity: 1, y: 0 }}
            >
                Clients List
            </motion.h1>


            <NewMappingCardComponent Data={clients} setUpd={setUpd} />
        </div>
    );
};

export default NewAdConfiguration