import React, {FunctionComponent} from "react"
// @ts-ignore
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

interface OwnASpaceShareItProps {

}

export const OwnASpaceShareIt: FunctionComponent<OwnASpaceShareItProps> = () => {
    return <div>
        <div className="show-for-large grid-container">
            <div className="oassi-image">
                <div style={{ width: 330, margin: "0 auto 0 0", textAlign: "center" }}>
                    <h2 className="oassi-title">Own a Space?</h2>
                    <h2 className="oassi-title-underlined">Share it</h2>
                    <h6 className="oassi-description">Share your space today and start earning great cash when and where it works for&nbsp;you.</h6>
                    <button onClick={() => FlowRouter.go('ListingCreate')} className="oassi-button">Start Earning</button>
                </div>
            </div>
        </div>

        <div className="hide-for-large-up">
            <div className="oassi-image">
                <div style={{ width: 330, margin: "auto", textAlign: "center", }}>
                    <h2 className="oassi-title">Own a Space?</h2>
                    <h2 className="oassi-title-underlined">Share it</h2>
                    <h6 className="oassi-description">Share your space today and start earning great cash when and where it works for&nbsp;you.</h6>
                    <button onClick={() => FlowRouter.go('ListingCreate')}  className="oassi-button">Start Earning</button>
                </div>
            </div>
        </div>

        <div style={{ height: 80 }} />
    </div>
}