import clsx from 'clsx';
import React from 'react';
import ShadeProvider, {type FetchKoenigLexical} from './providers/shade-provider';

/**
 * The className is used to scope the styles of the app to the app's namespace.
 * Some components in radixUI/ShadCN need to be wrapped in a div with the className
 * in order to work correctly.
 */
export const SHADE_APP_NAMESPACES = 'shade shade-admin shade-activitypub shade-stats shade-posts';

export interface ShadeAppProps extends React.HTMLProps<HTMLDivElement> {
    darkMode: boolean;
    fetchKoenigLexical: FetchKoenigLexical | null;
}

const ShadeApp: React.FC<ShadeAppProps> = ({darkMode, fetchKoenigLexical, className, children, ...props}) => {
    const appClassName = clsx(
        'shade',
        className
    );

    return (
        <div className={appClassName} {...props}>
            <ShadeProvider darkMode={darkMode} fetchKoenigLexical={fetchKoenigLexical}>
                {children}
            </ShadeProvider>
        </div>
    );
};

export default ShadeApp;
