import React from 'react';
import styled, { css } from 'styled-components';
import { Text } from '@bufferapp/components';
import { Helper } from '@bufferapp/analyze-shared-components';

import colors from '../colors';

const Container = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
`;

const Label = styled.div`
  margin: 0 0 0.25rem;

  ${props => props.small && css`
    margin-bottom: 0;
  `}
`;

const Value = styled.div``;

export default ({ small, label, value }) => (
  <Container>
    <Label small={small}>
      <Helper label={label}>
        <Text size="mini">{label}</Text>
      </Helper>
    </Label>
    <Value>
      <Text color="black" weight="bold" size={small ? 'mini' : 'large'}>{value}</Text>
    </Value>
  </Container>
);