import { useSelector } from 'react-redux';
import AuthRightSide from '@/Component/Auth/AuthRightSide'
import { AppStore } from '@/lib/store';

const AuthWrapper = ({ children }) => {
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const isFullWidth = userDetails?.role == 'influencer' && userDetails?.is_verify_otp && (userDetails?.pending_steps == 0 || userDetails?.pending_steps == 2);
    return (
        <div className={`h-screen grid ${isFullWidth ? "grid-cols-1" : "xl:grid-cols-2"} overflow-hidden bg-surfaceMuted relative`}>
            <div className="pointer-events-none absolute inset-0 bg-brand-radial opacity-60" aria-hidden="true"></div>
            <div className="h-screen overflow-y-auto relative sm:px-8 px-5 sm:pt-12 pt-8 z-20">
                {children}
            </div>
            <AuthRightSide userDetails={userDetails} />
        </div>
    )
}

export default AuthWrapper