import classNames from 'classnames';
import userSvg from '../../assets/user.svg';
import styles from './index.less';
import { Col, Grid } from 'antd';

interface IIssueProps {
  questionValue: string;
}

const { useBreakpoint } = Grid;

const Issue = (props: IIssueProps) => {
  const { questionValue } = props;

  const screens = useBreakpoint();
  const isMobile = screens.xs;

  return (
    <Col span={24} className={styles.question} style={{ marginTop: isMobile ? '0px' : '40px' }}>
      <img src={userSvg} alt="" className={styles.question_img} />
      <span
        className={classNames(isMobile && styles.mobile_question_span, styles.question_span)}
        style={{ marginLeft: isMobile ? '8px' : '16px' }}
      >
        {questionValue}
      </span>
    </Col>
  );
};

export default Issue;
