import { times } from 'lodash-es';
import CardMedia from '@material-hu/mui/CardMedia';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

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

const PathCardSkeleton = () => {
  const { spacing } = useTheme();

  return (
    <CardContainer
      fullWidth
      sx={{
        '& .MuiCardContent-root': {
          p: 0,
        },
      }}
    >
      <CardMedia
        component={Skeleton}
        sx={{
          width: '100%',
          height: 'auto',
          aspectRatio: '2/1',
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,
        }}
      />
      <Stack sx={{ p: 2, gap: 2 }}>
        <Stack sx={{ gap: 1 }}>
          <Skeleton
            height={spacing(3)}
            width="90%"
          />
          <Skeleton
            height={spacing(2)}
            width="40%"
          />
        </Stack>
        <Stack sx={{ flexDirection: 'row', gap: 1 }}>
          {times(2, index => (
            <Skeleton
              key={index}
              height={spacing(2)}
              width="30%"
            />
          ))}
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default PathCardSkeleton;
