import Stack from '@material-hu/mui/Stack';
import useTheme from '@material-hu/mui/styles/useTheme';
import Typography from '@material-hu/mui/Typography/Typography';

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

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

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

type SessionInstructorProps = Pick<SessionDetail, 'collaborator'>;

export const SessionInstructor = ({ collaborator }: SessionInstructorProps) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('learning');

  if (!collaborator) return null;

  return (
    <CardContainer fullWidth>
      <Stack sx={{ gap: 1 }}>
        <Typography
          variant="globalXS"
          fontWeight="fontWeightSemiBold"
          color={palette.new.text.neutral.lighter}
        >
          {t('session.detail.instructed_by')}
        </Typography>
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {collaborator}
        </Typography>
      </Stack>
    </CardContainer>
  );
};
