import { StartPageDesktop } from "./StartPageDesktop";
import { StartPageMobile } from "./StartPageMobile";

import { useRootContainerSize } from "@contexts/RootContainerWidthContext";

import type { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";

type QuizPreviewLayoutByTypeProps = {
  quizHeaderBlock: JSX.Element;
  quizMainBlock: JSX.Element;
  backgroundBlock: JSX.Element | null;
  startpageType: QuizStartpageType;
  alignType: QuizStartpageAlignType;
};

export const QuizPreviewLayoutByType = ({
  quizHeaderBlock,
  quizMainBlock,
  backgroundBlock,
  startpageType,
  alignType,
}: QuizPreviewLayoutByTypeProps) => {
  const isMobile = useRootContainerSize() < 700;

  return isMobile ? (
    <StartPageMobile
      quizHeaderBlock={quizHeaderBlock}
      quizMainBlock={quizMainBlock}
      backgroundBlock={backgroundBlock}
      startpageType={startpageType}
    />
  ) : (
    <StartPageDesktop
      alignType={alignType}
      startpageType={startpageType}
      quizHeaderBlock={quizHeaderBlock}
      quizMainBlock={quizMainBlock}
      backgroundBlock={backgroundBlock}
    />
  );
};
