import { IonContent, IonPage, IonButton } from '@ionic/react';
import { Component } from 'react';
import styles from './Welcome.module.scss';

type Props = { };

type OwnState = { };

class WelcomePage extends Component<Props, OwnState> {
    constructor(
        props: Props
    ) {
        super(props);
        this.state = {};
    }

    render() {
        return <IonPage>
            <IonContent fullscreen>
                <section className={styles.upfold}>
                    <figure>
                        <img src="assets/images/welcome/upfold.svg" alt="upfold image"/>
                    </figure>
                </section>

                <section className={styles.content}>
                    <div className={styles.container}>
                        <h2> Let's Get Started </h2>
                        <p>
                            Welcome to <strong> WorkX </strong>                            
                        </p>

                        <div className={styles.actionButtonsHolder}>
                            <IonButton className={styles.actionButton} expand="block" routerLink="/signup"> Create Account </IonButton>
                            <IonButton className={styles.actionButton} fill="outline" expand="block" routerLink="/login"> Login </IonButton>
                        </div>
                    </div>
                </section>
                
            </IonContent>
        </IonPage>
    };
};

export default WelcomePage;