import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';

import { useLokaliseTranslation } from 'src/utils/i18n';

import PathContentSkeleton from './PathContentSkeleton';
import PathInformationSkeleton from './PathInformationSkeleton';
import PathProgressSkeleton from './PathProgressSkeleton';

export type PathDetailSkeletonProps = {
  onBack: () => void;
};

const PathDetailSkeleton = ({ onBack }: PathDetailSkeletonProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();

  return (
    <Stack
      sx={{
        backgroundColor: palette.new.background.layout.default,
        minHeight: '100%',
        gap: 3,
        pb: 5,
      }}
    >
      <TaskFocusHeader
        onBack={onBack}
        title={t('path.detail')}
        slotProps={{
          root: {
            sx: {
              backgroundColor: palette.new.background.layout.default,
            },
          },
        }}
      />
      <Stack sx={{ px: 9 }}>
        <PathInformationSkeleton />
        <Divider sx={{ my: 3 }} />
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'flex-start',
            gap: 2,
          }}
        >
          <PathContentSkeleton />
          <PathProgressSkeleton />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default PathDetailSkeleton;