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

  display: flex;
  padding: var(--spacing-xxs);
  cursor: pointer;
  border-radius: var(--radius-s, 8px);
  align-items: center;

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

  :active {
    background-color: var(--colors-surface-transparent-pressed);
  }
`;
const InfoWrapper = styled.div `
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: var(--margin-s);
`;
export const AssetItem = ({ name, ticker, id, onClick }) => {
    return (React.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) },
        React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
        React.createElement(InfoWrapper, null,
            React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)" }, name),
            React.createElement(Text, { variant: "bodyLineHeight", fontWeight: "semiBold", color: "var(--colors-content-subdued-default-default)" }, ticker))));
};
//# sourceMappingURL=AssetItem.js.map