import { ClockIcon } from '@heroicons/react/24/outline';
import { motion } from 'framer-motion';

interface NotificationsPanelProps {
    notificationItems: Array<{
        icon: React.ReactNode;
        title: string;
        description: string;
        time: string;
        isUnread: boolean;
    }>;
}

export function NotificationsPanel({ notificationItems }: NotificationsPanelProps) {
    return (
        <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.2 }}
            className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"
        >
            <div className="p-4 border-b border-gray-100">
                <div className="flex items-center justify-between">
                    <h3 className="text-lg font-semibold text-gray-900">Notifications</h3>
                    <span className="text-sm text-primary-600 hover:text-blue-700 cursor-pointer">
                        Mark all as read
                    </span>
                </div>
            </div>

            <div className="max-h-[400px] overflow-y-auto overflow-x-hidden">
                {notificationItems.map((item, index) => (
                    <motion.div
                        key={index}
                        whileHover={{ x: 4 }}
                        className={`p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors ${item.isUnread ? 'bg-blue-50/50' : ''
                            }`}
                    >
                        <div className="flex gap-3">
                            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                                {item.icon}
                            </div>
                            <div className="flex-1">
                                <h4 className="text-sm font-medium text-gray-900">{item.title}</h4>
                                <p className="text-sm text-gray-600 mt-1">{item.description}</p>
                                <div className="flex items-center gap-1 mt-2 text-xs text-tertiary-300">
                                    <ClockIcon className='h-4 w-4'></ClockIcon>
                                    <span>{item.time}</span>
                                </div>
                            </div>
                        </div>
                    </motion.div>
                ))}
            </div>

            <div className="p-4 border-t border-gray-100 bg-gray-50">
                <button className="w-full text-sm text-center text-primary-600 hover:text-blue-700">
                    View all notifications
                </button>
            </div>
        </motion.div>
    );
}