import { times } from 'lodash-es';
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 Skeleton from '@material-hu/components/design-system/Skeleton';

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

const PathInformationSkeleton = () => {
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'start',
        justifyContent: 'space-between',
        gap: 3,
      }}
    >
      <Stack sx={{ flex: 1, gap: 3, alignItems: 'flex-start' }}>
        <TextInformation
          variant="XL"
          loading
          sx={{ width: '100%' }}
        />
        <Stack sx={{ flexDirection: 'row', gap: 1.5 }}>
          {times(4, property => (
            <Property
              key={property}
              loading
            />
          ))}
        </Stack>
        <Skeleton
          height={36}
          width={104}
        />
      </Stack>
      <Image
        loading
        sx={{
          width: RIGHT_DETAILS_WIDTH,
        }}
      />
    </Stack>
  );
};

export default PathInformationSkeleton;
