import React from "react";
import RenameInput from "../inputs/RenameInput";
import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";

interface ListProps {
  items?: { id: string; name: string }[]; // Optional array of items to render
  placeholder?: string; // Optional placeholder text
  remove?: boolean;
}

const List: React.FC<ListProps> = ({ items = [], remove }) => {
  console.log("items: ", items);
  return (
    <>
      {items.length > 0 ? (
        <ul className="list-wrapper">
          {items.map((item, index) => (
            <li key={index} className="list-container">
              <div className="list-item">
                <div className="value">
                  <RenameInput value={item.name} />
                </div>
                <div className="options-container">
                  <div className="lock option">
                    <LockIcon isLocked />
                  </div>
                  <div className="visibe option">
                    <EyeIcon isClosed />
                  </div>
                  {remove && (
                    <div className="remove option">
                      <RmoveIcon />
                    </div>
                  )}
                </div>
              </div>
            </li>
          ))}
        </ul>
      ) : (
        <div className="list-wrapper">
          <div className="no-item">No items to display</div>
        </div>
      )}
    </>
  );
};

export default List;