"use client";

import { useDarkMode } from "@/app/context/ThemeContext";
import { Moon, Sun, ArrowLeft } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";

export default function TopNav() {
  const { darkMode, toggleDarkMode } = useDarkMode();
  const router = useRouter();

  return (
    <div className="flex sticky top-0 left-0 w-full bg-background z-50 justify-between items-center border-b border-zinc-300 p-4">
      <div className="flex items-center gap-4">
        {/* Back Button */}
        <button
          onClick={() => router.back()}
          className="p-2 rounded-lg transition hover:bg-zinc-200 dark:hover:bg-zinc-700"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>
        <Link href="/" className="text-2xl font-bold cursor-pointer">
          SephAi - Prototype
        </Link>
      </div>
      <div className="flex gap-4 items-center">
        {/* Uncomment the following button to enable dark mode toggle */}
        {/*
        <button
          onClick={() => toggleDarkMode()}
          className="p-2 rounded-lg transition bg-zinc-700 hover:bg-zinc-600 dark:bg-zinc-300 dark:hover:bg-zinc-400"
        >
          {darkMode ? <Sun className="w-5 h-5 text-black" /> : <Moon className="w-5 h-5 text-white" />}
        </button>
        */}
      </div>
    </div>
  );
}