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

interface ListItemBaseProps {
  id: string;
  name: string;
  isActive?: boolean;
  canEdit?: boolean;
  remove?: boolean;
  expandable?: boolean;
  expanded?: boolean;
  onClick?: () => void;
  onRename: (newName: string) => void;
  onToggleExpand?: () => void;
  children?: React.ReactNode; // For nested assets
}

const ListItemBase: React.FC<ListItemBaseProps> = ({
  id,
  name,
  isActive,
  canEdit = true,
  remove,
  expandable,
  expanded,
  onClick,
  onRename,
  onToggleExpand,
  children,
}) => (
  <>
    <li className={`list-container ${isActive ? "active" : ""}`} onClick={onClick}>
      <div className="list-item">
        <button className="value" id={`${name}-${id}`}>
          <RenameInput value={name} onRename={onRename} canEdit={canEdit} />
        </button>

        <div className="options-container">
          <button
            className="lock option"
            id="lock-btn"
            onClick={(e) => e.stopPropagation()}
          >
            <LockIcon isLocked />
          </button>
          <button
            className="visibe option"
            id="visible-btn"
            onClick={(e) => e.stopPropagation()}
          >
            <EyeIcon isClosed />
          </button>
          {remove && (
            <button
              className="remove option"
              id="remove-btn"
              onClick={(e) => e.stopPropagation()}
            >
              <RemoveIcon />
            </button>
          )}
          {expandable && (
            <button
              id="expand-btn"
              className="expand-icon option"
              onClick={(e) => {
                e.stopPropagation();
                onToggleExpand?.();
              }}
            >
              <ArrowIcon />
            </button>
          )}
        </div>
      </div>
    </li>

    {expandable && expanded && <ul className="asset-list">{children}</ul>}
  </>
);

export default ListItemBase;
