import { times } from 'lodash-es';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import Image from '@material-hu/components/composed-components/Image';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Skeleton from '@material-hu/components/design-system/Skeleton';
import Title from '@material-hu/components/design-system/Title';

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

const PathContentSkeleton = () => {
  const { t } = useLokaliseTranslation('learning');
  const { shape } = useTheme();

  return (
    <Stack sx={{ gap: 1.5, width: '100%' }}>
      <Skeleton>
        <Title
          variant="M"
          title={t('path.courses.title')}
        />
      </Skeleton>
      <Stack sx={{ gap: 2, width: '100%' }}>
        {times(4, index => (
          <CardContainer
            key={index}
            fullWidth
            sx={{
              '& .MuiCardContent-root': {
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                gap: 1.5,
              },
            }}
          >
            <Image
              loading
              sx={{ height: '60px', borderRadius: shape.borderRadiusM }}
            />
            <Stack sx={{ flex: 1, gap: 0.5 }}>
              <Skeleton
                height={24}
                width="100%"
              />
              <Skeleton
                height={12}
                width="24%"
              />
            </Stack>
          </CardContainer>
        ))}
      </Stack>
    </Stack>
  );
};

export default PathContentSkeleton;
