import React from 'react';
import { cn } from '../../lib/utils';

interface AppLayoutProps {
    children: React.ReactNode;
    className?: string;
}

export const AppLayout: React.FC<AppLayoutProps> = ({ children, className }) => {
    return (
        <div className={cn("relative w-full h-screen overflow-hidden bg-slate-50 dark:bg-slate-950", className)}>
            {children}
        </div>
    );
};

export const TopBar: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    return (
        <header className="absolute top-0 left-0 right-0 h-14 z-50 flex items-center justify-between px-4 bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl border-b border-slate-200/60 dark:border-slate-700/60 shadow-sm">
            {children}
        </header>
    );
};

export const FloatingPanel: React.FC<{ children: React.ReactNode; className?: string; title?: string; side?: 'left' | 'right' }> = ({ children, className, title, side = 'left' }) => {
    return (
        <div
            className={cn(
                "absolute top-20 bottom-4 z-40 w-80 flex flex-col",
                "bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl",
                "rounded-2xl border border-slate-200/60 dark:border-slate-700/60",
                "shadow-2xl shadow-slate-900/10 dark:shadow-black/30",
                "transition-all duration-300 ease-in-out",
                side === 'left' ? "left-4" : "right-4",
                className
            )}
        >
            {title && (
                <div className="px-5 py-4 border-b border-slate-200/60 dark:border-slate-700/60 shrink-0 bg-gradient-to-b from-slate-50/50 to-transparent dark:from-slate-800/30">
                    <h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100 tracking-tight">{title}</h3>
                </div>
            )}
            <div className="flex-1 overflow-y-auto p-5 custom-scrollbar">
                {children}
            </div>
        </div>
    );
};

export const CanvasContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    return (
        <div className="absolute inset-0 z-0 w-full h-full">
            {children}
        </div>
    );
};
