import React, { useState } from "react";
import { KebebIcon } from "../../icons/ExportCommonIcons";

interface KebabMenuListProps {
  items: string[]; // Array of menu items
  onSelect?: (item: string) => void; // Callback when a menu item is selected
}

const KebabMenuList: React.FC<KebabMenuListProps> = ({ items, onSelect }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleToggle = () => {
    setIsOpen((prev) => !prev);
  };

  const handleItemClick = (item: string) => {
    if (onSelect) {
      onSelect(item);
    }
    setIsOpen(false); // Close menu after selection
  };

  return (
    <div className="kebab-menu-container">
      <div className="kebab-icon" onClick={handleToggle}>
        <KebebIcon />
      </div>
      {isOpen && (
        <div className="menu-list">
          {items.map((item, index) => (
            <div
              key={index}
              className="menu-item"
              onClick={() => handleItemClick(item)}
            >
              {item}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default KebabMenuList;