<script>
    import Logo from "$lib/images/gif/maxwell-cat.gif";
	import Icon from "./icon.svelte";

    import MenuIcon from "$lib/images/icons/ui/menu.svg";
    import LanguageIcon from "$lib/images/icons/ui/language.svg";
    import DarkmodeIcon from "$lib/images/icons/ui/darkmode.svg";
	import Spacer from "./service/spacer.svelte";
	import Searchbar from "./searchbar.svelte";
    
</script>

<header class="header prevent-select" data-sveltekit-preload-data="hover">

    <Icon class="header__menu-button" image={MenuIcon} size="64px"/>

    <img class="header__logo" alt="WeirdCat.su" src={Logo}>

    <a class="header__link"  href="/">Home</a>
    <a class="header__link" href="/blog">Blog</a>
    <a class="header__link" href="/services">Services</a>

    <Spacer type="horizontal"/>
    <Searchbar id="searchbar"/>

    <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
    <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>

</header>

<style>
    .header {
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        gap: 20px;
        padding: 5px 20px 5px 20px;

        height: 74px;
        background-color: var(--col_panel);
        box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.3);
    }

    .header__logo {
        height: 64px;
        width: 64px;

    }

    .header__link {
        font-size: 28px;
        text-decoration: none; 
        color: var(--col_text_panel);
    }

    .header__link:hover {
        color: var(--col_text_hint);
    }

</style>