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

import Image from '@material-hu/components/composed-components/Image';
import { TextInformation } from '@material-hu/components/composed-components/learning';
import Property from '@material-hu/components/composed-components/Property';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Skeleton from '@material-hu/components/design-system/Skeleton';

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

export const CourseInformationSkeleton = () => {
  return (
    <CardContainer
      color="white"
      fullWidth
      padding={24}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          gap: 3,
        }}
      >
        <Stack sx={{ flex: 1, gap: 1.5, alignItems: 'flex-start' }}>
          <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            {Array.from({ length: 2 }, (_, index) => (
              <Skeleton
                key={index}
                height={24}
                width={75}
              />
            ))}
          </Stack>
          <TextInformation
            variant="XL"
            loading
            sx={{ width: '100%' }}
          />
          <Stack sx={{ flexDirection: 'row', gap: 2, flexWrap: 'wrap' }}>
            {Array.from({ length: 3 }, (_, index) => (
              <Property
                key={index}
                loading
              />
            ))}
          </Stack>
          <Skeleton
            height={36}
            width={104}
          />
        </Stack>
        <Image
          loading
          sx={{
            width: COURSE_DETAIL_SIDE_WIDTH,
            alignSelf: 'center',
            maxHeight: '200px',
          }}
        />
      </Stack>
    </CardContainer>
  );
};
