"use client";

import { X } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

type RawCloseButtonProps = {
  targetHref: string;
};

export default function RawCloseButton({ targetHref }: RawCloseButtonProps) {
  const router = useRouter();

  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        router.push(targetHref);
      }
    };
    window.addEventListener("keydown", handleEsc);
    return () => window.removeEventListener("keydown", handleEsc);
  }, [targetHref, router]);

  return (
    <button
      onClick={() => router.push(targetHref)}
      className="absolute top-4 right-4 z-50 rounded-md bg-background/80 p-2 hover:bg-background/60 transition"
      title="Close full view (ESC)"
      type="button"
    >
      <X className="w-6 h-6" />
    </button>
  );
}