src/components/Navbar.tsx

'use client';

import { Button, Input } from '@/components/base';
import { SignOutButton, useUser } from '@clerk/nextjs';
import { Search } from 'lucide-react';
import Link from 'next/link';
import { useMemo } from 'react';

export function Navbar() {
  const { user, isSignedIn } = useUser();

  const authContent = useMemo(() => {
    if (isSignedIn) {
      return (
        <>
          <p className="font-heading">
            Hello,
            {' '}
            {user?.firstName}
          </p>
          <SignOutButton>
            <Button variant="destructive" size="default">
              Sign Out
            </Button>
          </SignOutButton>
        </>
      );
    }

    return (
      <>
        <Button variant="default" size="default">
          <Link href="/sign-in">Sign In</Link>
        </Button>
        <Button variant="secondary" size="default">
          <Link href="/sign-up">Sign Up</Link>
        </Button>
      </>
    );
  }, [isSignedIn, user]);

  return (
    <nav className="fixed top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 items-center">
        <div className="mr-4 flex items-center gap-2">
          <span className="text-xl">👋</span>
          <Link href="/" className="font-semibold">
            Jan
          </Link>
        </div>

        <div className="flex items-center gap-6 text-sm">
          <Link href="/dashboard" className="hover:text-foreground/80">
            Dashboard
          </Link>
          <Link href="/about" className="hover:text-foreground/80">
            About
          </Link>
        </div>

        <div className="ml-auto flex items-center gap-4">
          <div className="relative w-64">
            <Search className="absolute left-2 top-2.5 size-4 text-muted-foreground" />
            <Input placeholder="Search documentation..." className="pl-8" />
          </div>

          <div className="flex items-center gap-4">
            {authContent}
          </div>

        </div>
      </div>
    </nav>
  );
}