import React from 'react'
import { motion } from "framer-motion";

import { FaPlus, FaCircle } from "react-icons/fa";
import { api } from "../API/api";
import { useNavigate } from 'react-router-dom';
import { useLoading } from '../Context/LoadingContext';

export default function PartnersCardComponent({ Data, setUpd }) {
    const navigate = useNavigate();
    const { setLoading } = useLoading();


    const handleDelete = async (partnerid) => {
        console.log(partnerid)
        try {
            setLoading(true);
            const response = await api.delete(`/admin/delete-partner/${partnerid}`);
            console.log(response);
            setUpd(partnerid)
        } catch (error) {
            console.error("Error fetching files:", error);
        }
        setLoading(false)
    };




    return (

        <>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

                <motion.div
                    className="bg-gray-800 p-6 rounded-lg shadow-lg text-center cursor-pointer hover:bg-gray-700 transition flex items-center justify-center"
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    onClick={() => navigate("/add-partner")}
                >
                    <div>
                        <FaPlus className="text-5xl text-blue-500 mx-auto mb-4" />
                        <p className="text-lg font-semibold">Add New Partner</p>
                    </div>
                </motion.div>
                {Data?.map((client) => (
                    <motion.div
                        key={client.transid}
                        className="bg-gray-800 p-6 rounded-lg shadow-lg relative cursor-pointer hover:bg-gray-700 transition"
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0 }}
                        whileHover={{ scale: 1.03 }}
                        whileTap={{ scale: 0.98 }}
                        onClick={() => navigate(`/manage-partner/${client.transid}`)}
                    >

                        {/* Red Delete Button at Top Right Corner */}
                        <button
                            onClick={(e) => {
                                e.stopPropagation(); // Prevents triggering the card's onClick event
                                if (confirm("Are you sure you want to delete this Partner?")) {
                                    handleDelete(client.transid);
                                }
                            }}
                            className="absolute top-2 right-2 text-red-500 hover:text-red-700 text-xl"
                        >
                            🗑️
                        </button>
                        <div
                            className="bg-cover bg-center h-40 rounded-lg "
                            style={{
                                backgroundImage: `url('https://backend.dine360ads.com/${client.logo_url || ""}')`,
                            }}
                        ></div>

                        <div className="mt-4">
                            <h2 className="text-xl font-bold">{client.name}</h2>
                            <p className="text-gray-400">🕒 {client.open_time} - {client.close_time}</p>

                            {/* <div className="mt-2 ml-1 flex items-center">
                                <FaCircle className={`mr-2 ${client.is_active ? "text-green-400" : "text-red-400"}`} />
                                <span>     {client.is_active ? "Active" : "Inactive"}</span>
                            </div> */}
                        </div>
                    </motion.div>
                ))}
            </div>
        </>

    )
}