// components/Header.tsx
import Image from "next/image";
import { deleteAuth, getAuth } from "../../api/auth";
import { Button } from "@mui/material";
import { useRouter } from "next/navigation";

export default function Header() {
  const auth = getAuth();
  const route = useRouter();

  const handleSigOut = () => {
    deleteAuth();
    route.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" // Ganti dengan path logo Anda
            alt="Logo"
            width={120}
            height={60}
            className="rounded-full"
          />
        </div>
        {auth && (
          <div>
            <Button size="small" onClick={() => handleSigOut()}>
              Logout
            </Button>
          </div>
        )}
      </div>
    </nav>
  );
}