<script lang="ts">
    import AppLogoIcon from '@/components/AppLogoIcon.svelte';
    import { type Appearance, useAppearance } from '@/hooks/useAppearance.svelte';
    import { MonitorIcon, Moon, Sun } from 'lucide-svelte';
    import Button from './ui/button/button.svelte';
    import { Link } from '@inertiajs/svelte';

    const appearanceManager = useAppearance();
    // Create a local reactive variable that tracks the hook's value
    let currentAppearance = $state(appearanceManager.appearance);

    function handleUpdateAppearance(value: Appearance) {
        appearanceManager.updateAppearance(value);
        // Immediately update local state to ensure UI reflects the change
        currentAppearance = value;
    }
</script>

<div class="inline-flex w-full justify-around">
    <div class="inline-flex items-center gap-3">
        <div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md">
            <AppLogoIcon class="size-5 object-cover" />
        </div>
        <div class="flex items-center">
            <Link href={route('home')} class="flex items-center gap-x-2">
                <span class="truncate text-sm font-semibold">FlbxCup</span>
            </Link>
        </div>
    </div>
    <div class="flex items-center">
        {#if currentAppearance === 'light'}
            <Button onclick={() => handleUpdateAppearance('dark')}>
                <Sun class="h-4 w-4" />
            </Button>
        {:else if currentAppearance === 'dark'}
            <Button onclick={() => handleUpdateAppearance('system')}>
                <Moon class="h-4 w-4" />
            </Button>
        {:else}
            <Button onclick={() => handleUpdateAppearance('light')}>
                <MonitorIcon class="h-4 w-4" />
            </Button>
        {/if}
    </div>
</div>
