<script setup>
defineProps({
    messages: {
        type: Object,
        default: {},
    }
});
</script>

<style lang="css" scoped>
.header {
    background: linear-gradient(237.74deg,#1199a5,#436da7 83%);
}
.logo-green {
    color: rgb(162, 207, 0);
}
</style>

<template>
    <div>
        <header class="header">
            <div class="flex gap-5 items-center justify-start max-w-screen-lg mx-auto font-thasadith">
                <InertiaLink href="/dashboard">
                    <div
                        class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-4xl"
                    >Kamil<span class="logo-green">Craft</span></div>
                </InertiaLink>
                <nav>
                    <ul class="flex gap-3 items-center font-bold">
                        <li><InertiaLink class="text-white active:text-kamilcraft-green hover:text-black hover:underline" href="/dashboard/cv">CV</InertiaLink></li>
                        <li><InertiaLink class="text-white active:text-kamilcraft-green hover:text-black hover:underline" href="/dashboard/message">Msg</InertiaLink></li>
                        <li><InertiaLink class="text-white active:text-kamilcraft-green hover:text-black hover:underline" href="/dashboard/note">Notes</InertiaLink></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div v-if="messages?.info" class="max-w-screen-lg mx-2 lg:mx-auto mt-2 px-2 py-3 rounded-md bg-yellow-100 text-yellow-600 text-center">
            {{ messages.info }}
        </div>
        <div v-if="messages?.error" class="max-w-screen-lg mx-2 lg:mx-auto mt-2 px-2 py-3 rounded-md bg-red-100 text-red-600 text-center">
            {{ messages.error }}
        </div>
        <div v-if="messages?.success" class="max-w-screen-lg mx-2 lg:mx-auto mt-2 px-2 py-3 rounded-md bg-green-100 text-green-600 text-center">
            {{ messages?.success }}
        </div>
        <main class="max-w-screen-lg mx-2 lg:mx-auto mt-2 rounded-md bg-gray-50">
            <slot />
        </main>
    </div>
</template>
