import { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { NotificationsPanel } from './notifications-panel';
import { BellIcon } from '@heroicons/react/24/outline';
import { useClickOutside } from '@web/src/hooks/useClickOutside';

interface NotificationsDropdownProps {
    notifications: number;
    notificationItems: Array<any>;
}

export function NotificationsDropdown({ notifications, notificationItems }: NotificationsDropdownProps) {
    const [showNotifications, setShowNotifications] = useState(false);
    const notificationRef = useRef<HTMLDivElement>(null);
    useClickOutside(notificationRef, () => setShowNotifications(false));
    return (
        <div ref={notificationRef} className="relative">
            <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                onClick={() => setShowNotifications(!showNotifications)}
            >
                <BellIcon className='w-6 h-6' ></BellIcon>

                {notifications > 0 && (
                    <span className="absolute top-0 right-0 w-5 h-5 bg-red-500 text-white rounded-full text-xs flex items-center justify-center">
                        {notifications}
                    </span>
                )}
            </motion.button>

            <AnimatePresence>
                {showNotifications && (
                    <NotificationsPanel notificationItems={notificationItems} />
                )}
            </AnimatePresence>
        </div>
    );
}