/* eslint-disable object-curly-newline */
/* eslint-disable react/prop-types */
// @ts-nocheck
import React from "react";
import styled from "styled-components";
import { Text, Flex, Icon } from "@netdata/netdata-ui";
const ExternalButton = styled(Icon).attrs({
    margin: [0, 0, 0, "auto"],
    color: ["white", "pure"],
    width: "10px",
    height: "10px",
    alignSelf: "center",
    name: "nav_arrow_goto",
    role: "button",
    title: "Go to node",
    "data-testid": "k8sPopoverItem-externalButton",
}) `
  cursor: pointer;
`;
const Item = ({ icon, title, secondary, onClick }) => (React.createElement(Flex, { gap: 1, alignItems: "start", "data-testid": "k8sPopoverItem" },
    React.createElement(Flex, { width: "22px", height: "22px", "data-testid": "k8sPopoverItem-icon" },
        React.createElement(Icon, { name: icon, color: ["white", "pure"], margin: [0, 1, 0, 0], width: "22px", height: "22px" })),
    React.createElement(Text, { color: ["white", "pure"], "data-testid": "k8sPopoverItem-title" }, title),
    secondary && (React.createElement(Text, { color: "border", wordBreak: "break-all", "data-testid": "k8sPopoverItem-detail" }, secondary)),
    onClick && React.createElement(ExternalButton, { onClick: onClick })));
export default Item;
//# sourceMappingURL=item.js.map