Modal Close Interaction

"use client";

import { useState } from "react";
import { InteractiveModal } from "@/components/ui/modal-close-interaction";

export default function DemoOne() {
  const [isOpen, setIsOpen] = useState(false);
  const [clickPosition, setClickPosition] = useState({ x: 0, y: 0 });

  const handleOpen = (e: React.MouseEvent) => {
    // Capture click coordinates for the "expand" animation origin
    setClickPosition({ x: e.clientX, y: e.clientY });
    setIsOpen(true);
  };

  return (
    <div className="w-full h-screen flex items-center justify-center bg-white overflow-hidden">
      <button 
        onClick={handleOpen}
        className="px-8 py-3 bg-black text-white rounded-xl font-semibold hover:scale-105 shadow-lg active:scale-95 transform"
      >
        Click Me
      </button>

      <InteractiveModal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)} 
        clickPosition={clickPosition} 
      />
    </div>
  );
}