import React from "react";
import styled from "styled-components";
import { withTokens } from "../../libs";
import { Text } from "../../../components";
import { Tag } from "../Tag/Tag";
import { Address } from "../Address/Address";
const Wrapper = styled.div `
  ${withTokens("spacing-xxxs", "spacing-xxs", "spacing-xs", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed", "colors-content-subdued-default-default")}

  display: flex;
  padding: var(--spacing-xs) var(--spacing-xxs);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;

  :hover {
    background-color: var(--colors-surface-transparent-hover);
  }

  :active {
    background-color: var(--colors-surface-transparent-pressed);
  }
`;
export const AccountItem = ({ onClick, account, showIcon = true }) => {
    const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;
    return (React.createElement(Wrapper, { onClick: onClick },
        React.createElement("div", { style: {
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
            } },
            React.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" } },
                React.createElement("div", { style: {
                        display: "flex",
                        flexDirection: "row",
                        alignItems: "center",
                        marginBottom: "var(--spacing-xxxs)",
                    } },
                    React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", marginRight: "var(--spacing-xxs)", fontSize: "14px", lineHeight: "20px" }, name),
                    protocol && React.createElement(Tag, null, protocol)),
                React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, showIcon: showIcon }))),
        React.createElement("div", { style: { display: "flex", flexDirection: "column", textAlign: "right" } },
            React.createElement(Text, { fontSize: "14px" }, fiatValue),
            React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))));
};
//# sourceMappingURL=AccountItem.js.map