import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import CardMedia from '@material-hu/mui/CardMedia';
import Grid from '@material-hu/mui/Grid';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

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

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

export const CourseCardSkeleton = () => {
  const { palette, shape, spacing } = useTheme();

  return (
    <Grid
      item
      xs
    >
      <Card
        elevation={0}
        sx={{
          height: '100%',
          overflow: 'hidden',
          borderRadius: shape.borderRadiusL,
          border: 'solid 1px',
          borderColor: palette.new.border.neutral.divider,
        }}
      >
        <CardMedia
          component={HuSkeleton}
          sx={{
            width: '100%',
            height: 'auto',
            aspectRatio: COURSE_IMG_ASPECT_RATIO,
            borderBottomLeftRadius: 0,
            borderBottomRightRadius: 0,
          }}
        />
        <CardContent
          sx={{
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            gap: 3,
            p: `${spacing(1.5)} !important`,
            backgroundColor: palette.new.background.elements.default,
          }}
        >
          <Stack sx={{ gap: 0.5 }}>
            <HuSkeleton
              height="24px"
              width="82%"
            />
            <HuSkeleton
              height="16px"
              width="34%"
            />
          </Stack>
          <Stack
            sx={{
              flexDirection: 'row',
              gap: 0.5,
            }}
          >
            <HuSkeleton
              height="8px"
              sx={{ flex: 1 }}
            />
            <HuSkeleton
              height="8px"
              width="18px"
            />
          </Stack>
          <Stack
            sx={{
              flexDirection: 'row',
              gap: 1,
            }}
          >
            <HuSkeleton
              height="16px"
              width="32%"
            />
            <HuSkeleton
              height="16px"
              width="32%"
            />
          </Stack>
        </CardContent>
      </Card>
    </Grid>
  );
};

export default CourseCardSkeleton;
