import { Button } from "@theme";
import cn from "@utils/classnames.ts";
import { useTheme } from "@utils/context/theme/useTheme.ts";
import { MonitorCog, Moon, Sun } from "lucide-react";

function Header({ className = "" }: { className?: string }) {
  const { storedTheme, toggleTheme } = useTheme();

  return (
    <div className={cn(className)}>
      <div className="flex items-center justify-between gap-2 border-b-1 border-gray-200 px-4 py-2 dark:border-gray-800">
        <h1 className="font-bold">Transformers.js TextGeneration</h1>
        <Button
          color="mono"
          variant="ghost"
          onClick={toggleTheme}
          size="sm"
          aria-label="Toggle theme"
          iconRight={
            storedTheme === "system" ? (
              <MonitorCog className="h-3 w-3" />
            ) : storedTheme === "light" ? (
              <Sun className="h-3 w-3" />
            ) : (
              <Moon className="h-3 w-3" />
            )
          }
        >
          Theme:{" "}
        </Button>
      </div>
    </div>
  );
}

export default Header;