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

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 LibraryHomeSkeleton = () => {
  return (
    <CardContainer
      fullWidth
      padding={0}
    >
      <Image
        aspectRatio="4/1"
        loading
        sx={{ width: '100%', display: 'block' }}
      />
      <Stack sx={{ px: 3, py: 2 }}>
        <Skeleton
          height={28}
          width="55%"
        />
        <Skeleton
          height={20}
          width="90%"
          sx={{ mt: 1 }}
        />
      </Stack>
    </CardContainer>
  );
};
