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

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

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

const CoverSkeleton = () => {
  return (
    <CardContainer
      hasShadow
      fullWidth
      sx={{
        position: 'relative',
        overflow: 'hidden',
      }}
      padding={0}
    >
      <Skeleton
        variant="rectangular"
        width="100%"
        sx={{
          aspectRatio: COVER_ASPECT_RATIO,
          height: 288,
        }}
      />
      <Stack
        sx={{
          gap: 2.5,
          flexDirection: 'row',
          alignItems: 'center',
          pl: 3,
          py: 3,
        }}
      >
        <Stack
          sx={{
            position: 'relative',
            alignSelf: 'flex-end',
            flexShrink: 0,
            width: '20%',
            maxWidth: 152,
            height: 0,
            overflow: 'visible',
          }}
        >
          <Box
            sx={{
              position: 'absolute',
              left: 0,
              bottom: 0,
              width: '100%',
            }}
          >
            <Skeleton
              variant="circular"
              height="100%"
              sx={{ aspectRatio: 1 }}
            />
          </Box>
        </Stack>
        <Stack
          sx={{
            gap: 0.5,
            '& .MuiSkeleton-root': { transform: 'none' },
          }}
        >
          <Skeleton
            variant="text"
            height={32}
            width={310}
          />
          <Skeleton
            variant="text"
            height={16}
            width={155}
            sx={{ mb: 0.5 }}
          />
          <Skeleton
            variant="text"
            height={16}
            width={77}
          />
          <Skeleton
            variant="text"
            height={16}
            width={155}
          />
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default CoverSkeleton;
