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';

export const CourseContentSkeleton = () => {
  const { shape } = useTheme();

  return (
    <Stack sx={{ gap: 1.5, width: '100%' }}>
      <Skeleton
        height={24}
        width="100px"
      />
      <Stack sx={{ gap: 2, width: '100%' }}>
        {Array.from({ length: 4 }, (_, index) => (
          <CardContainer
            key={index}
            fullWidth
            sx={{
              '& .MuiCardContent-root': {
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                gap: 1.5,
              },
            }}
          >
            <Image
              loading
              sx={{ height: 40, width: 40, borderRadius: shape.borderRadiusM }}
            />
            <Stack sx={{ flex: 1, gap: 0.5 }}>
              <Skeleton
                height={24}
                width="60%"
              />
              <Skeleton
                height={12}
                width="24%"
              />
            </Stack>
          </CardContainer>
        ))}
      </Stack>
    </Stack>
  );
};
