import { Navigate } from 'react-router';

import Stack from '@material-hu/mui/Stack';
import { fadeIn } from '@material-hu/utils/animations';

import Title from '@material-hu/components/design-system/Title';

import useCommunityFeature from 'src/hooks/useCommunityFeature';
import { CommunityFeature } from 'src/types/communityFeatures';

import BaseLayout from '../../common/components/BaseLayout';

type LacomerWebviewWrapperProps = {
  title: string;
  children: React.ReactNode;
};

const LacomerWebviewWrapper = ({
  title,
  children,
}: LacomerWebviewWrapperProps) => {
  const canViewLacomerWebviews = useCommunityFeature(
    CommunityFeature.VIEW_LACOMER_WEBVIEWS,
  );

  if (!canViewLacomerWebviews)
    return (
      <Navigate
        to="/courses"
        replace
      />
    );

  return (
    <BaseLayout title={title}>
      <Stack
        sx={{
          px: 3,
          py: 2,
          gap: 1,
          height: '100%',
          animation: `${fadeIn} 0.3s ease-in-out`,
        }}
      >
        <Title
          variant="L"
          title={title}
        />

        {children}
      </Stack>
    </BaseLayout>
  );
};

export default LacomerWebviewWrapper;