import { motion } from 'framer-motion';
import { useNavigate, useLocation } from 'react-router-dom';
import { NavItem } from '@nice/client';

interface SidebarProps {
    navItems: Array<NavItem>;
}

export function Sidebar({ navItems }: SidebarProps) {
    const navigate = useNavigate();
    const location = useLocation();
    return (
        <motion.aside
            initial={{ x: -300, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            exit={{ x: -300, opacity: 0 }}
            transition={{ type: "spring", bounce: 0.1, duration: 0.5 }}
            className="fixed left-0 top-16 bottom-0 w-64 bg-white border-r border-gray-200 z-40"
        >
            <div className="p-4 space-y-2">
                {navItems.map((item, index) => {
                    const isActive = location.pathname === item.path;
                    return (
                        <motion.button
                            key={index}
                            whileHover={{ x: 5 }}
                            onClick={() => {
                                navigate(item.path)
                            }}
                            className={`flex items-center gap-3 w-full p-3 rounded-lg transition-colors
                ${isActive
                                    ? 'bg-blue-50 text-blue-600'
                                    : 'text-gray-700 hover:bg-blue-50 hover:text-blue-600'
                                }`}
                        >
                            {item.icon}
                            <span className="font-medium">{item.label}</span>
                        </motion.button>
                    );
                })}
            </div>
        </motion.aside>
    );
}