import { IonButton } from '@ionic/react';
import './style.css';
import QuestionProgress from './QuestionProgress';
import { HelloworldImage } from '../../../components/HelloworldImage';

interface QuestionCardProps {
  question_num: number;
  nextQuestion: () => void;
  num_correct: number;
  incNumCorrect: () => void;
}

const QuestionCard: React.FC<QuestionCardProps> = ({ num_correct, question_num, nextQuestion, incNumCorrect }) => {
  return (
    <>
      {/*  */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ marginTop: '1rem', marginBottom: '1rem' }}>
          <QuestionProgress />
        </div>
        <div>Question card {question_num}</div>
        <div style={{ width: '12rem', height: '12rem' }}>
          <HelloworldImage />
        </div>
        <div>Select the word you heard</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '1rem' }}>
          <div>
            <IonButton>Keyboard</IonButton>
          </div>
          <div>
            <IonButton>Keyboard</IonButton>
          </div>
          <div>
            <IonButton>Keyboard</IonButton>
          </div>
        </div>
      </div>
      {/*  */}
      <div>num_correct: {num_correct}</div>
      <div>
        <IonButton onClick={nextQuestion}>next question</IonButton>
        <IonButton onClick={incNumCorrect}>mark question correct</IonButton>
      </div>
    </>
  );
};

export default QuestionCard;
