import { IonContent, IonPage } from '@ionic/react';
import './style.css';

import { HelloworldImage } from '../../../components/HelloworldImage';
import MarkRating from '../../../components/MarkRating';

const PracticeFinish: React.FC = () => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '1rem' }}>
          <div style={{ width: '8rem', height: '8rem' }}>
            <HelloworldImage />
          </div>
          <div style={{ fontWeight: 'bold', fontSize: '2rem', textDecoration: 'underline', marginTop: '1rem' }}>
            Technology
          </div>
          <div style={{ fontWeight: 'bold', fontSize: '2rem', marginTop: '1rem' }}>Well Done</div>
          <div style={{ fontSize: '1.2rem', marginTop: '1rem' }}>Accuracy 75%</div>

          <div style={{ marginTop: '1rem' }}>
            <MarkRating num_rating={3} />
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default PracticeFinish;
