import styles from './index.less';
import Issue from './issue.component';
import Answer from './answer.component';
import { Grid, Row } from 'antd';
import classNames from 'classnames';

interface INewSessionProps {
  questionValue: string;
  answerValue: string;
  onRetry?: (prompt: string) => void;
}

const { useBreakpoint } = Grid;

const NewSession = (props: INewSessionProps) => {
  const { questionValue, answerValue, onRetry } = props;

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

  return (
    <Row
      style={{
        padding: isMobile ? '' : '0 0 0 72px !important',
        width: isMobile ? '100vw' : 'calc(100vw - 240px - 144px)',
      }}
      className={classNames(isMobile && styles.mobile_newSession, styles.newSession)}
    >
      <Issue questionValue={questionValue} />
      <Answer
        answerValue={answerValue}
        onRetry={() => {
          onRetry && onRetry(questionValue);
        }}
      />
    </Row>
  );
};

export default NewSession;
