"use client";

import { useState } from "react";
import Modal from "react-modal";

export default function ModalDemo() {
  const [visible, setVisible] = useState(false);

  const customStyles = {
    content: {
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      transform: "translate(-50%, -50%)",
      backgroundColor: "#f0f0f0",
      border: "1px solid #333",
      padding: "20px",
    },
  };

  return (
    <div data-testid="react-modal-result">
      <p>react-modal loaded successfully</p>
      <button onClick={() => setVisible(true)}>Show Modal</button>
      <Modal isOpen={visible} style={customStyles} ariaHideApp={false}>
        <div>
          <p>Modal Content</p>
          <button onClick={() => setVisible(false)}>Hide Modal</button>
        </div>
      </Modal>
    </div>
  );
}