import React from 'react';

import classNames from 'classnames';

import * as styles from 'app/styles/WelcomeDialog.scss';

export interface IWelcomeDialogProps {
    handleClose : () => void;
}

export class WelcomeDialog extends React.Component<IWelcomeDialogProps> {

    public render() {
        const { handleClose } = this.props;

        const wrapperCss = classNames(
            'nes-dialog',
            'nes-container',
            styles.dialog,
        );

        const closeCss = classNames(
            'nes-icon',
            'close',
            'is-small',
            styles.closeButton,
        );

        return (
            <div className={ wrapperCss }>
                <h3 className={ styles.title }>Welcome to PVPokémon</h3>
                <ul>
                    <li>Hello</li>
                    <li>Goodbye</li>
                </ul>
                <i
                    className={ closeCss }
                    onClick={ handleClose }
                />
            </div>
        );
    }
}