"use client";
import { ThemeToggle } from "@/app/components/ThemeToggle";
import { SearchBar } from "@/app/components/SearchBar";
import { Button } from "@/app/components/ui/Button";
import React from "react";

export function AppHeader() {
  const [user, setUser] = React.useState<{ nickname: string } | null>(null);
  React.useEffect(() => {
    fetch("/api/auth/session")
      .then((r) => r.json())
      .then((d) => setUser(d?.ok ? d.user : null))
      .catch(() => setUser(null));
  }, []);
  const onLogout = async () => {
    await fetch("/api/auth/session", { method: "DELETE" });
    setUser(null);
    location.reload();
  };
  return (
    <header style={{ display: "flex", justifyContent: "space-between", padding: 12 }}>
      <div>msg App</div>
      <nav style={{ display: "flex", gap: 12, alignItems: "center" }}>
        <a href="/">홈</a>
        <a href="/boards">게시판</a>
        <SearchBar />
        <ThemeToggle />
        {user ? (
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span>{user.nickname}님</span>
            <Button variant="ghost" onClick={onLogout}>로그아웃</Button>
          </div>
        ) : (
          <a href="/login">로그인</a>
        )}
      </nav>
    </header>
  );
}