// components/Header.tsx
"use client";

import Image from "next/image";
import { deleteAuth, getAuth } from "../../api/auth";
import { Button } from "@mui/material";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function Header() {
  const router = useRouter();
  const [mounted, setMounted] = useState(false);
  const [auth, setAuth] = useState<any>(null);

  useEffect(() => {
    setMounted(true);
    try {
      setAuth(getAuth());
    } catch {
      setAuth(null);
    }
  }, []);

  const handleSignOut = () => {
    deleteAuth();
    router.push("/login");
  };

  return (
    <nav className="fixed top-0 left-0 w-full bg-white border-b-2 border-red-500 py-4 px-4 sm:px-96 z-50 shadow-md">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <Image
            src="/images/indoteknik-logo.png"
            alt="Logo"
            width={120}
            height={60}
            className="rounded-full"
            priority
          />
        </div>
        <div>
          {mounted && auth ? (
            <Button size="small" onClick={handleSignOut}>
              Logout
            </Button>
          ) : (
            <span className="inline-block h-8 w-16" aria-hidden />
          )}
        </div>
      </div>
    </nav>
  );
}