import Popup from "@/components/PopUp";
import Button from "@/components/Button";
import { useRouter } from "next/router";

type LoginRequiredPopupProps = {
  open: boolean;
  onClose: () => void;
  callbackUrl?: string;
};

function LoginRequiredPopup({ open, onClose, callbackUrl }: LoginRequiredPopupProps) {
  const router = useRouter();
  const target = callbackUrl ?? router.asPath ?? "/";

  const handleLoginRedirect = () => {
    const loginUrl = `/login?callbackUrl=${encodeURIComponent(target)}`;
    router.push(loginUrl);
    onClose();
  };

  return (
    <Popup isOpen={open} onClose={onClose}>
      <div className="flex flex-col gap-4 text-left">
        <h2 className="text-xl font-semibold">Login erforderlich</h2>
        <p>Bitte melde dich an, um fortzufahren.</p>
        <div
          style={{
            display: "flex",
            gap: "var(--spacing-md)",
            justifyContent: "flex-end",
            marginTop: "var(--spacing-lg)",
          }}
        >
          <Button variant="secondary" onClick={onClose}>
            Abbrechen
          </Button>
          <Button variant="primary" onClick={handleLoginRedirect}>
            Zum Login
          </Button>
        </div>
      </div>
    </Popup>
  );
}

export default LoginRequiredPopup;