"use client";
import React, { useState } from "react";
import PopoverMenu, { PopoverMenuItem } from "@/components/PopoverMenu/ModuleEditor";
import { Button } from "antd";

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

  const menuItems: PopoverMenuItem[] = [
    {
      key: "1",
      label: "Profile",
      onClick: () => alert("Profile clicked"),
    },
    {
      key: "2",
      label: "Settings",
      onClick: () => alert("Settings clicked"),
    },
    {
      key: "3",
      label: "Logout",
      onClick: () => alert("Logout clicked"),
      className: "text-red-500",
    },
  ];

  return (
    <div style={{ padding: "40px" }}>
      <h2>Testing PopoverMenu</h2>
      <PopoverMenu
        title="Menu"
        data={menuItems}
        visible={visible}
        onChangeVisible={setVisible}
      >
        <Button type="primary">Open Menu</Button>
      </PopoverMenu>
    </div>
  );
}