"use client";

import { useSession, signOut } from "next-auth/react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/ThemeToggle";

export function Navbar() {
  const { data: session } = useSession();

  return (
    <header className="border-b border-border bg-card">
      <div className="max-w-5xl mx-auto flex items-center justify-between px-3 sm:px-6 py-2.5 sm:py-3">
        <Link href="/" className="font-bold text-primary text-base sm:text-lg tracking-tight">
          HurkiCorgi MC
        </Link>
        <div className="flex items-center gap-1 sm:gap-2">
          <ThemeToggle />
          {session ? (
            <>
              <Button variant="ghost" size="sm" render={<Link href="/admin" />}>
                Admin
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => signOut({ callbackUrl: "/" })}
                className="text-muted-foreground"
              >
                Logout
              </Button>
            </>
          ) : (
            <Button variant="ghost" size="sm" render={<Link href="/login" />}>
              Login
            </Button>
          )}
        </div>
      </div>
    </header>
  );
}