import { Component, Event, EventEmitter, h } from '@stencil/core';
import { resolveAsset } from '../../../classes/helpers';

@Component({
    tag: 'progress-home',
    styleUrl: 'progress-home.css',
    scoped: true,
})
export class ProgressHome {
    @Event() progressStepChanged: EventEmitter;
    progressStepChangedHandler() {
        this.progressStepChanged.emit();
    }

    render() {
        const img1 = resolveAsset('/assets/home-1.jpg');
        const img2 = resolveAsset('/assets/home-2.jpg');

        return (
            <div class="wrapper">
                <img class="img-1" src={img1} />
                <img class="img-2" src={img2} />
                <div class="button-wrapper">
                    <button class="btn" onClick={this.progressStepChangedHandler.bind(this, 'progress')}>
                        Get Started
                    </button>
                </div>
            </div>
        );
    }
}