'use client';

import { FC, ReactNode } from 'react';
import { cn } from '@/utils/helpers';
import { useAppSelector } from '@/store/redux/hooks';
import { Sidebar } from '../Sidebar';
import { Header, HeaderProps } from '../Header';
import styles from './PageContainer.module.scss';

export interface PageContainerProps extends HeaderProps {
  children: ReactNode;
  className?: string;
  fullWidth?: boolean;
}

export const PageContainer: FC<PageContainerProps> = ({
  children,
  className,
  fullWidth = false,
  ...headerProps
}) => {
  const collapsed = useAppSelector((state) => state.settings.sidebarCollapsed);

  return (
    <div className={styles.pageContainer}>
      <Sidebar />
      <div className={cn(styles.pageContainer__main, collapsed && styles['pageContainer__main--collapsed'])}>
        <Header {...headerProps} />
        <main className={cn(styles.pageContainer__content, fullWidth && styles['pageContainer__content--fullWidth'], className)}>
          {children}
        </main>
      </div>
    </div>
  );
};
