import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

import MarkdownContent from 'src/components/MarkdownContent';

import { getStaggerAnimationSx } from '../constants';

type RulesContentProps = {
  rulesContent: string | null;
};

const RulesContent = ({ rulesContent }: RulesContentProps) => {
  const { t } = useLokaliseTranslation('sportsPool');

  if (!rulesContent) {
    return null;
  }

  return (
    <Stack sx={{ gap: 1.5 }}>
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
        sx={{ lineHeight: 1 }}
      >
        {t('rules_tab.scoring_system')}
      </Typography>
      <Box sx={getStaggerAnimationSx(0)}>
        <CardContainer fullWidth>
          <MarkdownContent markdown={rulesContent} />
        </CardContainer>
      </Box>
    </Stack>
  );
};

export default RulesContent;