import { useEffect } from "react";
import { useAuth } from "../context/AuthContext";
import styles from "./ImpersonationBanner.module.css";

/**
 * Fixed amber banner shown when an admin is impersonating a creator.
 * Adds body.impersonating class to push page content down.
 */
export default function ImpersonationBanner() {
  const { isImpersonating, user, exitImpersonation } = useAuth();

  useEffect(() => {
    if (isImpersonating) {
      document.body.classList.add("impersonating");
    } else {
      document.body.classList.remove("impersonating");
    }
    return () => {
      document.body.classList.remove("impersonating");
    };
  }, [isImpersonating]);

  if (!isImpersonating) return null;

  return (
    <div className={styles.banner} role="alert">
      <span className={styles.text}>
        <span className={styles.icon} aria-hidden="true">👁</span>
        Viewing as <strong>{user?.display_name ?? "Unknown"}</strong>
      </span>
      <button className={styles.exitBtn} onClick={exitImpersonation}>
        Exit
      </button>
    </div>
  );
}
