import { useSidebar } from '@/components/ui/sidebar';
import { cn } from '@/lib/utils';
import * as React from 'react';

interface AppContentProps extends React.ComponentProps<'main'> {
    variant?: 'header' | 'sidebar';
}

export function AppContent({ variant = 'header', children, className, ...props }: AppContentProps) {
    if (variant === 'sidebar') {
        const { state, isMobile } = useSidebar();
        const isCollapsed = state === 'collapsed';

        return (
            <main
                className={cn(
                    "flex-1 flex flex-col min-h-screen transition-[margin-left] duration-200 ease-linear",
                    !isMobile && (isCollapsed ? "ml-28" : "ml-72"),
                    isMobile && "ml-0",
                    className
                )}
                {...props}
            >
                {children}
            </main>
        );
    }

    return (
        <main className="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl" {...props}>
            {children}
        </main>
    );
}