import Image from "next/image";
import Button from "./Button";
import { AccountCircle } from "@mui/icons-material";
import Row from "./Row";
import Spacer from "./Spacer";
import styles from "@/styles/Headline.module.css";
import SignoutButton from "./SignoutButton";
import { useRouter } from "next/router";
import LoginIcon from "@mui/icons-material/Login";
import Link from "next/link";

enum PageState {
  Start = "Start",
  Session = "Session",
  Profil = "Profil",
}

type HeadlineProps = {
  pageState: PageState;
  onChangePage?: (page: PageState) => void;
  isAuthenticated?: boolean;
};

function Headline({
  pageState,
  onChangePage,
  isAuthenticated,
}: HeadlineProps) {
  const router = useRouter();

  return (
    <header className={styles.headline}>
      <Row>
        <Link
          href="/"
          aria-label="Startseite"
          onClick={() => onChangePage?.(PageState.Start)}
        >
          <Image
            src="/logo.svg"
            alt="Logo"
            width={200}
            height={44}
            className={styles.logo}
          />
        </Link>
        <Spacer />
        <Row className={styles.nav}>
          {/* Start/Session Buttons entfernt, da nicht benötigt */}
          {isAuthenticated ? (
            <>
              <Button
                onClick={() => router.push("/profil")}
                variant={pageState === PageState.Profil ? "primary" : "secondary"}
                icon={<AccountCircle />}
              >
                Profil
              </Button>
              <SignoutButton />
            </>
          ) : (
            <Button
              onClick={() => router.push("/login?callbackUrl=%2F")}
              variant="primary"
              icon={<LoginIcon />}
            >
              Login
            </Button>
          )}
        </Row>
      </Row>
    </header>
  );
}

export default Headline;
export { PageState };