import React from 'react';
import { BrowserRouter } from 'react-router-dom'

import { Navbar } from '../components/Navbar';

import logo from './assets/logo-icon.png'

export default {
    title: 'Design System/Navbar',
    component: Navbar
};

const Template = (args) => <BrowserRouter><Navbar {...args} /></BrowserRouter>;

export const Named = Template.bind({});
Named.args = {
    title: 'Acme',
    user: null,
    homeLink: '/',
    loginLink: '/login',
    signupLink: '/signup',
    menu: [
        {
            name: 'Solutions',
            link: '/',
            subs: [
                {
                    name: 'Remote work',
                    link: '/'
                },
                {
                    name: 'Project management',
                    link: '/'
                },
                {
                    name: 'Communication',
                    link: '/'
                },
                {
                    name: 'Reporting & dashboards',
                    link: '/'
                }        
            ]
        },
        {
            name: 'Pricing',
            link: '/',
            subs: [
                {
                    name: 'Business',
                    link: '/'
                },
                {
                    name: 'Enterprise',
                    link: '/'
                }
            ]
        }
    ]
}

export const Logo1 = Template.bind({});
Logo1.args = {
    logo: logo,
    user: null,
    homeLink: '/',
    loginLink: '/login',
    signupLink: '/signup',
    menu: [
        {
            name: 'Solutions',
            link: '/',
            subs: [
                {
                    name: 'Remote work',
                    link: '/'
                },
                {
                    name: 'Project management',
                    link: '/'
                },
                {
                    name: 'Communication',
                    link: '/'
                },
                {
                    name: 'Reporting & dashboards',
                    link: '/'
                }        
            ]
        },
        {
            name: 'Pricing',
            link: '/'
        }
    ]
}

export const Logo2 = Template.bind({});
Logo2.args = {
    logo: 'https://storage.googleapis.com/pr-newsroom-wp/1/2018/11/Spotify_Logo_RGB_Black.png',
    user: null,
    homeLink: '/',
    loginLink: '/login',
    signupLink: '/signup',
    menu: [
        {
            name: 'Solutions',
            link: '/',
            subs: [
                {
                    name: 'Remote work',
                    link: '/'
                },
                {
                    name: 'Project management',
                    link: '/'
                },
                {
                    name: 'Communication',
                    link: '/'
                },
                {
                    name: 'Reporting & dashboards',
                    link: '/'
                }        
            ]
        },
        {
            name: 'Pricing',
            link: '/'
        }
    ]
}

export const Logo3 = Template.bind({});
Logo3.args = {
    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/1200px-Apple_Computer_Logo_rainbow.svg.png',
    user: null,
    homeLink: '/',
    loginLink: '/login',
    signupLink: '/signup',
    menu: [
        {
            name: 'Solutions',
            link: '/',
            subs: [
                {
                    name: 'Remote work',
                    link: '/'
                },
                {
                    name: 'Project management',
                    link: '/'
                },
                {
                    name: 'Communication',
                    link: '/'
                },
                {
                    name: 'Reporting & dashboards',
                    link: '/'
                }        
            ]
        },
        {
            name: 'Pricing',
            link: '/'
        }
    ]
}