"use client";

import { useSyncExternalStore } from "react";
import Link from "next/link";
import { Container } from "./Container";
import { TextLink } from "@/components/ui/TextLink";
import { useAuth } from "@/lib/hooks/useAuth";

const subscribe = () => () => {};
const getSnapshot = () => true;
const getServerSnapshot = () => false;

export function Header() {
  const { isAuthenticated, logout } = useAuth();
  const mounted = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

  return (
    <header className="py-8 border-b border-neutral-100">
      <Container>
        <nav className="flex items-center justify-between">
          <Link
            href="/"
            className="text-xl font-bold tracking-tighter hover:opacity-70 transition-opacity"
          >
            AI Blog
          </Link>

          <div className="flex items-center gap-8">
            {mounted && (
              <>
                {isAuthenticated ? (
                  <>
                    <TextLink href="/admin">Dashboard</TextLink>
                    <TextLink href="/drafts">My Drafts</TextLink>
                    <button
                      onClick={logout}
                      className="text-sm tracking-wide uppercase text-neutral-500 hover:text-black transition-colors"
                    >
                      Logout
                    </button>
                  </>
                ) : (
                  <TextLink href="/login">Login</TextLink>
                )}
              </>
            )}
          </div>
        </nav>
      </Container>
    </header>
  );
}