'use client'
import {ReactNode, useEffect, useState} from "react";
import {X} from "lucide-react";
import {createPortal} from "react-dom";

interface SettingsPanelProps {
    title: string;
    sidebar: ReactNode;
    children: ReactNode;
    onClose: () => void;
}

export default function SettingsPanel({title, sidebar, children, onClose}: SettingsPanelProps) {
    const [mounted, setMounted] = useState<boolean>(false);
    
    useEffect((): void => {
        setMounted(true);
    }, []);
    
    if (!mounted) return null;
    
    return createPortal(
        <div className="fixed inset-0 z-40 bg-darkest-background/60 backdrop-blur-md flex items-center justify-center">
            <div className="w-3/4 h-[85vh] bg-tertiary rounded-2xl border border-secondary flex flex-col">
                
                <div className="px-6 py-4 rounded-t-2xl flex justify-between items-center">
                    <h2 className="font-['ADLaM_Display'] text-xl text-text-primary">{title}</h2>
                    <button
                        onClick={onClose}
                        className="text-text-primary/80 hover:text-text-primary p-2 rounded-lg hover:bg-text-primary/10 transition-all"
                    >
                        <X className="w-5 h-5" strokeWidth={1.75}/>
                    </button>
                </div>
                
                <div className="flex flex-1 min-h-0">
                    <div className="w-56 flex-shrink-0 overflow-y-auto">
                        {sidebar}
                    </div>
                    <div className="flex-1 min-h-0 p-2 pl-0">
                        <div className="h-full bg-darkest-background rounded-xl overflow-hidden">
                            <div className="h-full overflow-y-auto">
                                {children}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>,
        document.body
    );
}
