import { motion } from 'framer-motion';
import { NavItem } from "@nice/client"
interface CourseSidebarProps {
    isHovered: boolean;
    setIsHovered: (value: boolean) => void;
    navItems: NavItem[];
    selectedSection: number;
    onNavigate: (item: NavItem, index: number) => void;
}

export default function CourseEditorSidebar({
    isHovered,
    setIsHovered,
    navItems,
    selectedSection,
    onNavigate
}: CourseSidebarProps) {
    return (
        <motion.nav
            initial={{ width: "5rem" }}
            animate={{ width: isHovered ? "16rem" : "5rem" }}
            transition={{ type: "spring", stiffness: 300, damping: 40 }}
            onHoverStart={() => setIsHovered(true)}
            onHoverEnd={() => setIsHovered(false)}
            className="fixed left-0 top-16 h-[calc(100vh-4rem)] bg-white border-r border-gray-200 shadow-lg overflow-x-hidden"
        >
            <div className="p-4">
                {navItems.map((item, index) => (
                    <button
                        key={index}
                        onClick={() => onNavigate(item, index)}
                        className={`w-full flex ${!isHovered ? 'justify-center' : 'items-center'} px-5 py-2.5 mb-1 rounded-lg transition-all duration-200 ${selectedSection === index
                            ? "bg-blue-50 text-blue-600 shadow-sm"
                            : "text-gray-600 hover:bg-gray-50"
                            }`}
                    >
                        <span className="flex-shrink-0">{item.icon}</span>
                        {isHovered && (
                            <>
                                <motion.span
                                    initial={{ opacity: 0 }}
                                    animate={{ opacity: 1 }}
                                    className="ml-3 font-medium flex-1 truncate"
                                >
                                    {item.label}
                                </motion.span>

                            </>
                        )}
                    </button>
                ))}
            </div>
        </motion.nav>
    );
}