import { isNil } from 'lodash-es';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { type ReviewUserToShare } from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { getScoreDisplay } from '../../../utils';

type ReviewScoreCardByDirectionProps = Partial<
  Pick<ReviewUserToShare, 'score' | 'scoreTag'>
> & {
  size?: 'large' | 'small';
};

const ReviewScoreCardByDirection = ({
  score,
  scoreTag,
  size = 'small',
}: ReviewScoreCardByDirectionProps) => {
  const { t } = useLokaliseTranslation('performance');
  const HuGoThemeProvider = useHuGoTheme();

  if (isNil(score) && !scoreTag) return null;

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          alignItems: 'flex-end',
          justifyContent: 'center',
        }}
      >
        <Typography
          variant={'globalXS' as never}
          color="new.text.neutral.lighter"
        >
          {t('general:rating')}
        </Typography>
        <Typography
          variant={(size === 'large' ? 'h4' : 'globalM') as never}
          fontWeight="fontWeightSemiBold"
          color="new.text.neutral.brand"
        >
          {getScoreDisplay(score, scoreTag)}
        </Typography>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default ReviewScoreCardByDirection;
