import React from "react";
import { ModuleId } from "./types";
import SvgIcon from "../Svg/Icon";
import Tooltip from "../Tooltip";
import { getActiveClasses } from "../utility/active-classes";
import MenuItemFocus from "../MenuItemFocus";

export default function ListItemInner({
  title,
  id,
  onClick,
  className,
  isDraggingAny
}: {
  title: string;
  id: ModuleId;
  className?: string;
  onClick: () => void;
  isDraggingAny?: boolean;
}) {
  return (
    <Tooltip
      title={title}
      placement="right"
      disableHoverListener={isDraggingAny}
    >
      <button
        onClick={() => onClick()}
        className={getActiveClasses([
          "auik-cursor-pointer auik-appearance-none auik-border-none auik-w-full auik-h-13 auik-flex auik-items-center auik-justify-center auik-flex-grow",
          className,
          MenuItemFocus.ParentClasses
        ])}
        aria-label={title}
      >
        {!isDraggingAny && <MenuItemFocus.Component withTransition={true} />}
        <SvgIcon className="auik-text-white" size={20} alias={id} />
      </button>
    </Tooltip>
  );
}