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

import useGetCourse from '../../courses/hooks/useGetCourse';

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

export type CourseDetailProps = {
  courseId: number | string;
};

const CourseDetail = ({ courseId }: CourseDetailProps) => {
  const { course, isLoading } = useGetCourse({ courseId });

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

export default CourseDetail;