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

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

import { type SessionDetail } from '../../types';

import { SessionCover } from './Sections/SessionCover';
import { SessionDetails } from './Sections/SessionDetails';
import { SessionInformation } from './Sections/SessionInformation';
import { SessionInstructor } from './Sections/SessionInstructor';
import { SessionStatus } from './Sections/SessionStatus';

type SessionProps = { session: SessionDetail };

export const Session = ({ session }: SessionProps) => {
  return (
    <Stack sx={{ gap: 2, flexDirection: 'row' }}>
      <Stack sx={{ gap: 2, width: '60%' }}>
        <SessionInformation session={session} />
        <SessionDetails session={session} />
        <SessionInstructor collaborator={session.collaborator} />
      </Stack>
      <CardContainer
        sx={{
          width: '40%',
          maxHeight: 'fit-content',
          '& .MuiCardContent-root': {
            gap: 2,
            flexDirection: 'column',
            display: 'flex',
          },
        }}
      >
        <SessionCover pictureUrl={session.pictureUrl} />
        <SessionStatus session={session} />
      </CardContainer>
    </Stack>
  );
};