<script>
    import { page } from '$app/stores';
</script>

<header class="bg-white shadow-md p-4 flex justify-between items-center">
    <a
        href="/"
        class="text-3xl font-bold text-gray-800 focus:outline-none"
    >
        Superset Tools
    </a>
    <nav class="space-x-4">
        <a
            href="/"
            class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname === '/' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
        >
            Dashboard
        </a>
        <a
            href="/migration"
            class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/migration') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
        >
            Migration
        </a>
        <a
            href="/settings"
            class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname === '/settings' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
        >
            Settings
        </a>
    </nav>
</header>
