import React from "react";
import styled from "styled-components";
import Text from "../../../components/Text/Text";
import HighIcon from "../../../components/Svg/Icons/HighIcon";

interface Props {
  cakePriceUsd?: number;
}

const PriceLink = styled.a`
  display: flex;
  align-items: center;
  margin-right: 10px;
  svg {
    transition: transform 0.3s;
  }
  :hover {
    svg {
      transform: scale(1.2);
    }
  }
`;

const CakePrice: React.FC<Props> = ({ cakePriceUsd }) => {
  return (
    <PriceLink
      href="https://exchange.pancakeswap.finance/#/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82"
      target="_blank"
    >
      <HighIcon width="24px" mr="8px" />
      <Text color="textSubtle" bold>
        {cakePriceUsd ? `$${cakePriceUsd.toFixed(3)}` : "$0"}
      </Text>
    </PriceLink>
  );
};

export default React.memo(CakePrice);