import * as React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link } from "react-router-dom";

interface IBottomNavProps {
    joinURL: string;
}

export const BottomNav: React.FC<IBottomNavProps> = (props) => (
    <div>
        <nav
            className="fixed bottom-0 w-full hidden sm:flex items-center justify-between bg-darkblue-100 h-16 z-30">
            <div className="px-4 flex items-center">
                <Link to="add-node"
                    className="flex items-center text-white hover:text-blue-500 transition mr-8">
                    <FontAwesomeIcon icon="plus-circle" className="mr-2" />
                    <span className="font-semibold text-sm">Add your node</span>
                </Link>
                <a href={props.joinURL}
                    className="flex items-center text-white hover:text-blue-500 transition mr-8"
                    target="_blank">
                    <FontAwesomeIcon icon="code-branch" className="mr-2" />
                    <span className="font-semibold text-sm">Join testnet</span>
                </a>
            </div>
            <div
                className="px-4 flex items-center font-semibold text-sm text-grey-600">
                <a href="https://github.com/Alethio/eth2stats-client/issues"
                    className="mr-8 flex items-center text-grey-600 hover:text-blue-500 transition"
                    target="_blank">
                    <FontAwesomeIcon icon="exclamation-circle" className="mr-2" />
                    <span className="font-semibold text-sm">Report issues</span>
                </a>
                <div className="flex items-center">
                    <span className="mr-2">powered by </span>
                    <a href="https://aleth.io"
                        className="text-grey-600 hover:text-blue-500 transition"
                        target="_blank">Aleth.io</a>
                </div>
            </div>
        </nav>
    </div>
);