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

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

import { type User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';

type SubstituteApproverProps = {
  substituteApprover: User;
};

const SubstituteApproverDetail = ({
  substituteApprover,
}: SubstituteApproverProps) => {
  const { t } = useLokaliseTranslation('time_off');
  return (
    <CardContainer
      color="grey"
      fullWidth
    >
      <Stack>
        <Typography
          variant="globalXS"
          sx={{
            color: theme => theme.palette.new.text.neutral.lighter,
          }}
        >
          {t('substitute_approver.title')}
        </Typography>
        <UserAvatar
          user={substituteApprover}
          profileProps={{
            redirectToPath: `/profile/${substituteApprover.id}`,
          }}
          sx={{
            '& .MuiListItem-root': { p: 0 },
          }}
        />
      </Stack>
    </CardContainer>
  );
};

export default SubstituteApproverDetail;