import { Component } from 'react';
import * as React from 'react';
import { AmplitudeEvents } from '../../events/amplitudeEvents';
import { NonstopHomeLearnMoreSelectedEvent } from '../../models/amplitude/NonstopHomeLearnMoreSelectedEvent';
import eventEmitter from '../../services/eventEmitter';

interface ILearnMoreProps {
    learnMoreUrl: string;
}

export class LearnMore extends Component<ILearnMoreProps, {}> {
    public render(): React.ReactNode {
        return (
            <div className='ns-learn-more-faq'>
                <div className='ns-container'>
                <div className='ns-row'>
                    <div className='ns-col-12 ns-col-md-7 ns-col-lg-5 offset-lg-2 text-center'>
                        <h2>Have a question?</h2>
                        <p>Visit our <a href={this.props.learnMoreUrl} target='_blank'>Nonstop FAQ</a> for all the answers</p>
                    </div>
                    <div className='ns-col-12 ns-col-md-5 ns-col-lg-3'>
                        <a href={this.props.learnMoreUrl} target='_blank' className='btn btn-nonstop btn-nonstop-secondary' onClick={() => this.handleClick()}>LEARN MORE</a>
                    </div>
                    </div>
                    </div>
                </div>
        );
    }

    private handleClick() {
        eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeLearnMoreSelected, new NonstopHomeLearnMoreSelectedEvent());
    }
}