import React from 'react';
import { ReactComponent as SelectedSvg } from "../../../../assets/form-icons/selected-icon.svg";
const OuterLink = (props) => (React.createElement("a", { href: props.href, target: "_blank", rel: "noopener noreferrer", className: "appDropdown-linkWap" }, props.children));
import { AppDropdownItemDiv } from './styled';
const AppDropdownItem = (props) => {
    const { hoverBgColor, value, label, isActive, href, path, el, onClick } = props;
    const [isHovered, toggleHovered] = React.useState(false);
    const inlineStyles = hoverBgColor && isHovered ? { backgroundColor: hoverBgColor } : {};
    const item = (React.createElement(React.Fragment, null,
        el,
        label));
    let content = item;
    if (href) {
        content = React.createElement(OuterLink, { href: href }, item);
    }
    else if (path) {
        content = React.createElement("div", null, item);
    }
    return (React.createElement("li", { onMouseEnter: () => toggleHovered(true), onMouseLeave: () => toggleHovered(false), style: inlineStyles, role: "presentation", onClick: () => onClick && onClick(value) },
        React.createElement(AppDropdownItemDiv, { isActive: isActive },
            React.createElement("div", null, content),
            isActive && React.createElement(SelectedSvg, null))));
};
export default AppDropdownItem;
