import HashView from "./HashView";
import StackableContainer from "../layout/StackableContainer";
import { printableCoins } from "../../lib/displayHelpers";

export default (props) => (
  <StackableContainer lessPadding lessMargin>
    <ul className="meta-data">
      {props.tx.msgs && (
        <li>
          <label>Amount:</label>
          <div>{printableCoins(props.tx.msgs[0].value.amount)}</div>
        </li>
      )}
      {props.tx.msgs && (
        <li>
          <label>To:</label>
          <div title={props.tx.msgs[0].value.toAddress}>
            <HashView hash={props.tx.msgs[0].value.toAddress} />
          </div>
        </li>
      )}
      {props.tx.fee && (
        <>
          <li>
            <label>Gas:</label>
            <div>{props.tx.fee.gas}</div>
          </li>
          <li>
            <label>Fee:</label>
            <div>{printableCoins(props.tx.fee.amount)}</div>
          </li>
        </>
      )}
      {props.tx.memo && (
        <li>
          <label>Memo:</label>
          <div>{props.tx.memo}</div>
        </li>
      )}
    </ul>
    <style jsx>{`
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .meta-data li {
        margin-top: 10px;
        background: rgba(255, 255, 255, 0.03);
        padding: 6px 10px;
        border-radius: 8px;
        display: flex;
        align-items: center;
      }
      .meta-data li:first-child {
        margin-top: 0;
      }
      .meta-data label {
        font-size: 12px;
        background: rgba(255, 255, 255, 0.1);
        padding: 3px 6px;
        border-radius: 5px;
        display: block;
      }
      .meta-data li div {
        padding: 3px 6px;
      }
    `}</style>
  </StackableContainer>
);