"use client";

import { useEffect, useState } from "react";
import { exitImpersonation } from "@/lib/impersonation";
import { isImpersonating, SESSION_CHANGED_EVENT } from "@/lib/session-context";

export function ImpersonationBanner() {
  const [active, setActive] = useState(false);

  useEffect(() => {
    const sync = () => setActive(isImpersonating());
    sync();
    window.addEventListener(SESSION_CHANGED_EVENT, sync);
    return () => window.removeEventListener(SESSION_CHANGED_EVENT, sync);
  }, []);

  if (!active) return null;

  return (
    <div className="flex items-center justify-between gap-3 bg-amber-500 px-4 py-2 text-xs text-white lg:px-6">
      <span>در حال مشاهده با حساب دیگر</span>
      <button
        type="button"
        className="rounded-lg bg-white/20 px-3 py-1 font-semibold"
        onClick={() => {
          exitImpersonation("/staff");
        }}
      >
        بازگشت به حساب اصلی
      </button>
    </div>
  );
}