import PropTypes from 'prop-types';
import classNames from 'classnames';
import Button from '../shared/buttons/button';
import { CORRECT_COLOR, DONT_KNOW_COLOR, WRONG_COLOR } from './utils';

function Option(props) {
  const { option } = props;

  const color = option.isCorrect ? CORRECT_COLOR : option.id ? WRONG_COLOR : DONT_KNOW_COLOR;
  return (
    <Button
      id={`option ${option.id}`}
      disabled
      outline={false}
      color={color}
      colorWeight={300}
      borderWeight={2}
      textColor='gray'
      textColorWeight='600'
      size='xl'
      justifyContent={option.id ? 'start' : 'between'}
      className={`w-full border-2 border-${color}-300`}
    >
      <span className={classNames('flex', { 'mx-auto': !option.id })}>
        {option.id !== 0 && (
          <span className='shrink-0 font-semibold'>{`گزینه ${props.index + 1}:`}</span>
        )}
        <span className={classNames('mx-4 text-justify', { 'font-semibold': !option.id })}>
          {option.text}
        </span>
      </span>
    </Button>
  );
}

Option.propTypes = {
  option: PropTypes.object.isRequired,
  index: PropTypes.number.isRequired
};

export default Option;
