import { ReactNode, useState } from "react";
import { useNavigate } from "react-router-dom";
import { DEFAULT_NAV_ITEMS } from "./navItems";
import CourseEditorHeader from "./CourseEditorHeader";
import { motion } from "framer-motion";
import { NavItem } from "@nicestack/client"
import CourseEditorSidebar from "./CourseEditorSidebar";
interface CourseEditorLayoutProps {
    children: ReactNode;
}


export default function CourseEditorLayout({ children }: CourseEditorLayoutProps) {
    const [isHovered, setIsHovered] = useState(false);
    const [selectedSection, setSelectedSection] = useState<number>(0);
    const [navItems, setNavItems] = useState<NavItem[]>(DEFAULT_NAV_ITEMS);
    const navigate = useNavigate();
    const handleNavigation = (item: NavItem, index: number) => {
        setSelectedSection(index);
        navigate(item.path);
    };
    return (
        <div className="min-h-screen bg-gray-50">
            <CourseEditorHeader />
            <div className="flex pt-16">
                <CourseEditorSidebar
                    isHovered={isHovered}
                    setIsHovered={setIsHovered}
                    navItems={navItems}
                    selectedSection={selectedSection}
                    onNavigate={handleNavigation}
                />
                <motion.main
                    animate={{ marginLeft: isHovered ? "16rem" : "5rem" }}
                    transition={{ type: "spring", stiffness: 200, damping: 25, mass: 1 }}
                    className="flex-1 p-8"
                >
                    <div className="max-w-6xl mx-auto bg-white rounded-xl shadow-lg">
                        <header className="p-6 border-b border-gray-100">
                            <h1 className="text-2xl font-bold text-gray-900">
                                {navItems[selectedSection]?.label}
                            </h1>
                        </header>
                        <div className="p-6">{children}</div>
                    </div>
                </motion.main>
            </div>
        </div>
    );
}