const preact = require('preact');

// components all the way down
const Icon = name => (
    <span>
        {name}
        <svg width="80" height="80" data-jdenticon-value={name} />
    </span>
);

// the css attribute name `class` is reserved in js
// so in react you have to call it `className`
function Navbar() {
    const NAMES = ['Mashy', 'ntr'];

    return (
        <div>
            <nav className="navbar">
                <div className="navbar-end">
                    <a href="/somewhere" className="navbar-item is-active">
                        Home
                    </a>
                    <a href="/somewhere" className="navbar-item">
                        Store
                    </a>
                    <a href="/somewhere" className="navbar-item">
                        FAQ
                    </a>
                    <span className="navbar-item">
                        <a href="/somewhere" className="button is-info is-inverted">
                            <span className="icon">
                                <svg width="80" height="80" data-jdenticon-value="Blog" />
                            </span>
                            <span>Blog</span>
                        </a>
                    </span>
                </div>
            </nav>
            {NAMES.map(Icon)}
        </div>
    );
    // map is a function that is called on every element of an array
    // so in this ^^ case it calls Icon('Mashy') which returns some jsx
    // that gets put into the dom
}

module.exports = Navbar;