<template>
    <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6 sticky top-0">
        <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
            <div class="text-sm lg:flex-grow text-white ">
                <router-link class=" mt-4 text-3xl  lg:mt-0 text-white hover:text-teal-200 mr-4" to="/">
                    R-Shopping Cart
                </router-link>
                <router-link class="mt-4  lg:mt-0 text-teal-200 hover:text-white mr-4" to="/about">
                    About
                </router-link>
                <router-link class=" mt-4  lg:mt-0 text-teal-200 hover:text-white mr-4" to="/contact">
                    Contact
                </router-link>
                <router-link
                    class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0"
                    to="/cart">Kart{{ kartItems > 0 ? kartItems : "" }}</router-link>
                <span class="mt-4 lg:mt-0 mr-4 relative top-5">
                    <p class="text-xl text-white capitalize" v-if="user">{{ user }}</p>
                    <SLogin v-else :loginText="customLoginButton" @user-login="setUserInfo"></SLogin>
                </span>
            </div>
        </div>
    </nav>
</template>

<script>
import { SLogin } from '@sangarajuguptanisum/vue-custom-components';
export default {
    name: "Header",
    data() {
        return {
            user: ''
        }
    },
    props: {
        kartItems: {
            type: Number,
            default: 0
        },
        customLoginButton: {
            type: String,
            default: "CLogin"
        }
    },
    methods: {
        setUserInfo(data) {
            this.user = data.user.name;
            console.log(data);
        }
    }

}
</script>
<style scoped></style>