<script>
    import ThemeSwitch from "./ThemeSwitch.svelte";
    import Button from "./Button.svelte";

    // /** @type {'tables' | 'viewes'} */
    export let current_page = "";

    /** @type {any} */
    export let db_scheme = {};

    export let is_view_open = false;

    export let check_access = (name) => false;

    export let is_logedin = false;

    export let is_loaded = false;

    export let on_logout = () => {};
</script>

<div
    class="w-full h-[80px] mb-2 pr-4 text-xl flex-initial
    flex justify-between items-center
    bg-[var(--w-bg-second)] dark:bg-[#111]"
>
    <div class="flex">
        {#if is_logedin && is_loaded}
            {#each Object.entries(db_scheme) as page_name}
                {#if check_access(page_name[0])}
                    <button
                        on:click={() => {
                            is_view_open = false;
                            current_page = page_name[0];
                        }}
                        class="m-4 mx-2 p-4
                        {current_page === page_name[0]
                            ? 'bg-[#d8efff] dark:bg-[#114040]'
                            : 'bg-[var(--w-button-bg)] dark:bg-black text-[var(--w-accent-text)] dark:text-[var(--b-accent-text)]'}
                        border-2 border-[var(--w-border)] dark:border-[var(--b-border)]"
                    >
                        {page_name[0]}
                    </button>
                {/if}
            {/each}
        {/if}
    </div>
    <div class="space-x-4 flex justify-center items-center">
        <ThemeSwitch></ThemeSwitch>
        {#if is_logedin && is_loaded}
            <Button
                on_click={on_logout}
                class_name={"!text-black hover:!text-white dark:!text-white bg-[var(--w-red)] dark:bg-[var(--b-red)]"}
            >
                Выход
            </Button>
        {/if}
    </div>
</div>
