import { type FC } from 'react';

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

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

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

type Props = {
  user: MeUser;
};
export const RequestedOnBehalfOf: FC<Props> = ({ user }) => {
  const { t } = useLokaliseTranslation('time_off');

  return (
    <HuCardContainer
      fullWidth
      color="grey"
    >
      <Typography
        variant="globalXS"
        sx={{
          fontWeight: 'fontWeightRegular',
        }}
      >
        {t('REQUESTED_ON_BEHALF_OF')}
      </Typography>
      <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}>
        <HuUserAvatar
          user={user}
          profileProps={{
            redirectToPath: `/profile/${user.id}`,
          }}
          sx={{ '& .MuiListItem-root': { p: 0 }, maxWidth: 500 }}
        />
      </Stack>
    </HuCardContainer>
  );
};

export default RequestedOnBehalfOf;