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

import useGetCourse from 'src/pages/dashboard/Learning/Courses/hooks/useGetCourse';
import { sToMs } from 'src/utils/timeUtils';

import { CourseContent } from './CourseContent';
import { CourseInformation } from './CourseInformation';

export type CourseDetailProps = {
  courseId: number;
  open: boolean;
};

export const CourseDetail = ({ courseId, open }: CourseDetailProps) => {
  const { data: course, isLoading } = useGetCourse({
    courseId,
    options: {
      enabled: open,
      staleTime: sToMs(120),
    },
  });

  return (
    <Stack sx={{ gap: 3 }}>
      <CourseInformation
        course={course}
        loading={isLoading}
      />
      <CourseContent
        course={course}
        loading={isLoading}
      />
    </Stack>
  );
};
