import Chip from '@material-hu/mui/Chip';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { getCyclesStatusLabelKey } from 'src/pages/dashboard/performance/utils';
import { type ReviewCycleStatus } from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { getReviewStatusColors } from './utils';

type ReviewStatusProps = {
  status: ReviewCycleStatus;
};

const ReviewStatus = (props: ReviewStatusProps) => {
  const { status } = props;
  const theme = useTheme();
  const { t } = useLokaliseTranslation('performance');
  const colors = getReviewStatusColors(theme, status);

  return (
    <Chip
      sx={{
        backgroundColor: colors.background,
        border: '0.5px solid',
        borderColor: 'transparent',
      }}
      size="small"
      label={
        <Typography
          variant="caption"
          sx={{ color: colors.label }}
        >
          {t(getCyclesStatusLabelKey(status))}
        </Typography>
      }
    />
  );
};

export default ReviewStatus;