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

import { TextInformation } from '@material-hu/components/composed-components/learning';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Chip from '@material-hu/components/design-system/Chip';

import { type SessionDetail } from 'src/pages/dashboard/learning/sessions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type SessionInformationProps = { session: SessionDetail };

export const SessionInformation = ({ session }: SessionInformationProps) => {
  const { t } = useLokaliseTranslation('learning');

  const copetin = `${session.localDate} • ${session.startTime} ${t('general:hours_short')} `;

  return (
    <CardContainer fullWidth>
      <Stack sx={{ gap: 2 }}>
        <Chip
          sx={{ maxWidth: 'fit-content' }}
          label={t(`session.type.${session.type.toLowerCase()}_title`)}
        />
        <TextInformation
          copetin={copetin}
          title={session.title}
          description={session.description}
          variant="L"
        />
      </Stack>
    </CardContainer>
  );
};
