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

import { CourseContentSkeleton } from './CourseContentSkeleton';
import { CourseInformationSkeleton } from './CourseInformationSkeleton';
import { CourseProgressSkeleton } from './CourseProgressSkeleton';

const DetailSkeleton = () => {
  return (
    <Stack
      sx={{
        backgroundColor: ({ palette }) => palette.new.background.layout.default,
        minHeight: '100%',
        gap: 3,
        pb: 5,
      }}
    >
      <CourseInformationSkeleton />
      <Divider sx={{ my: 3 }} />
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'flex-start',
          gap: 2,
        }}
      >
        <CourseContentSkeleton />
        <CourseProgressSkeleton />
      </Stack>
    </Stack>
  );
};

export default DetailSkeleton;