import { Grid } from 'antd';
import LargeScreen from './LargeScreen';
import MediumScreen from './MediumScreen';
import SmallScreen from './SmallScreen';

const ExamPage = () => {
  console.log('ExamPage component rendered');
  const screens = Grid.useBreakpoint();

  return (
    <div data-testid="exam-page">
      {screens.xxl && <LargeScreen />}
      {screens.xl && !screens.xxl && <MediumScreen />}
      {screens.lg && !screens.xl && <MediumScreen />}
      {screens.sm && !screens.lg && <SmallScreen />}
      {screens.xs && !screens.sm && <SmallScreen />}
    </div>
  );
};

export default ExamPage;