using next.js 14

// session.ts
import { cookies } from 'next/headers';

export function getToken() {
    const session = cookies().get('session')?.value;
    if (!session) return null;
    return session;
}

// layout.tsx
import { getToken } from '@/libs/session';

export default function MainLayout({ children }: { children: ReactNode }) {
    const token = getToken();

    return (
        <div>
            <Navbar />
            <div>
                {children}
            </div>
        </div>
    );
}

If im getting my token like this I have no errors, but if a deport my getToken inside Navbar

export const Navbar = () => {
    const token = getToken();
    console.log(token);

    return <></>;
}

I got error :
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.

Can someone explain me why I got this error ? thanks for the help