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

import { ReviewQuestionType } from 'src/types/performance';

import { QUESTION_TYPES } from '../constants';

type Props = {
  type: ReviewQuestionType;
  index: number;
  checked?: boolean;
};

const OptionBullet = ({ type, index, checked = false }: Props) => {
  const Icon = checked
    ? QUESTION_TYPES[type].Icon
    : QUESTION_TYPES[type].BlankIcon;
  return Icon ? (
    <Icon
      fontSize="small"
      sx={{ color: 'gray' }}
    />
  ) : (
    <Typography
      variant="body2"
      color="gray"
      sx={{ width: '15px', ml: 1 }}
    >
      {index + 1}
    </Typography>
  );
};

export default OptionBullet;