import React, { Component } from 'react';

require("./portal.scss");


export function PortalContainer(props) {
    return (<div className="portal-container-outer"><div>{ props.children }</div></div>);
}

export function PortalLinks(props) {
    return (<div className="portal-links">{ props.children }</div>);
}

export function PortalLink({ title, description, icon, className, onClick, buttons }) {
    return (
        <a className={`portal-link${className ? " " + className : ""}`} onClick={ (e) => { 
            e.preventDefault();
            onClick(); 
        } }>
            <div className="portal-icon">
                { icon ? <i className="icon">{icon}</i> : null }
            </div>
            <div className="portal-content">
                { title ? <h3 className="title">{ title }</h3> : null }
                { description ? <div className="description">{ description }</div> : null }
            </div>
            <div className="portal-button">
                <i className="icon"></i>
            </div>
        </a>
    );
}

export function PortalOption({ title, description, icon, className, onClick, buttons }) {
    return (
        <div className={`portal-option${className ? " " + className : ""}`}>
            <div className="portal-icon">
                { icon }
            </div>
            <div className="portal-content">
                { title ? <h3 className="title">{ title }</h3> : null }
                { description ? <div className="description">{ description }</div> : null }
            </div>
            <div className="portal-button">
                { buttons }
            </div>
        </div>
    );
}

