import _extends from "@babel/runtime/helpers/esm/extends";
import _styled from "styled-components";
import React, { forwardRef } from "react";
import classNames from "classnames";
import { StyledCommandPaletteCommandItem, StyledIcon } from "./CommandPalette.styles";
import { useSelectedContext } from "./context";
import { ArrowRightIcon } from "../Icons";
import { Typography } from "../Typography/Typography";
export const CommandPaletteCommandItem = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    title,
    renderIcon,
    className,
    index,
    as,
    ...rest
  } = _ref;
  const Component = as || "a";
  const icon = renderIcon();
  const {
    selected,
    setSelected
  } = useSelectedContext();
  const onMouseEnter = () => {
    setSelected(index);
  };
  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
    as: Component,
    ref: ref,
    className: classNames("cp-item cp-command", className),
    tabIndex: 1,
    "aria-selected": selected === index,
    onMouseEnter: onMouseEnter,
    $selected: index === selected
  }), /*#__PURE__*/React.createElement(StyledIcon, null, icon), /*#__PURE__*/React.createElement(_StyledTypography, {
    overflow: "truncate",
    whitespace: "no-wrap",
    variant: "Body 1",
    color: "primary"
  }, title), /*#__PURE__*/React.createElement(ArrowRightIcon, null)));
});
CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
var _StyledTypography = _styled(Typography).withConfig({
  displayName: "CommandPaletteCommandItem___StyledTypography",
  componentId: "sc-1t486ve-0"
})(["flex:1;"]);
//# sourceMappingURL=CommandPaletteCommandItem.js.map