import type { FC } from 'react';
import type { ItemPageLayoutProps } from './types';

import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import DesktopSingleColumnLayout from './DesktopSingleColumnLayout';
import DesktopTwoColumnLayout from './DesktopTwoColumnLayout';
import MobileSingleColumnLayout from './MobileSingleColumnLayout';

const ItemPageLayout: FC<ItemPageLayoutProps> = ({ settings, ...props }) => {
  const isLargeScreen = useIsLargeScreen();

  if (isLargeScreen) {
    switch (settings.desktopLayout) {
      case 'desktopSingleColumn': {
        return (
          <DesktopSingleColumnLayout
            {...props}
            {...settings.desktopSingleColumn}
          />
        );
      }

      case 'desktopTwoColumn': {
        const { content, ...restProps } = props;

        return (
          <DesktopTwoColumnLayout
            primaryContent={content}
            {...restProps}
            {...settings.desktopTwoColumn}
          />
        );
      }
    }
  }

  return (
    <MobileSingleColumnLayout {...props} {...settings.mobileSingleColumn} />
  );
};

export default ItemPageLayout;