import React from "react"
import { Responsive } from "../Utils/Responsive"
import { BorderBox } from "../Elements/Box"
import { Sans } from "@artsy/palette"
import { themeGet } from "styled-system"
import styled from "styled-components"

const TextWrap = styled.div`
  display: block;

  @media ${themeGet("mediaQueries.xs")} {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
  }
`

export interface MarketInsight {
  primaryLabel: string
  secondaryLabel: string
}

export interface MarketInsightsProps {
  insights: MarketInsight[]
}

export class MarketInsights extends React.Component<MarketInsightsProps> {
  render() {
    return (
      <Responsive>
        {({ xs }) => {
          return (
            <BorderBox flexDirection="column">
              {this.props.insights.map(insight => {
                return (
                  <TextWrap>
                    <Sans size="2" weight="medium" display="inline" mr={3}>
                      {insight.primaryLabel}
                    </Sans>
                    <Sans size="2" display="inline" color="black60">
                      {insight.secondaryLabel}
                    </Sans>
                  </TextWrap>
                )
              })}
            </BorderBox>
          )
        }}
      </Responsive>
    )
  }
}

import React from "react"
import { Responsive } from "../Utils/Responsive"
import { Box, BorderBox } from "../Elements/Box"
import { Flex } from "../Elements/Flex"
import { Sans } from "@artsy/palette"

const wrapper = xs => props =>
  xs ? <Flex flexDirection="column" mb={3} {...props} /> : <Box {...props} />

export interface MarketInsight {
  primaryLabel: string
  secondaryLabel: string
}

export interface MarketInsightsProps {
  insights: MarketInsight[]
}

export class MarketInsights extends React.Component<MarketInsightsProps> {
  render() {
    return (
      <BorderBox flexDirection="column">
        <Responsive>
          {({ xs }) => {
            const TextWrap = wrapper(xs)
            return this.props.insights.map(insight => {
              return (
                <TextWrap>
                  <Sans size="2" weight="medium" display="inline" mr={3}>
                    {insight.primaryLabel}
                    k{" "}
                  </Sans>
                  <Sans size="2" display="inline" color="black60">
                    {insight.secondaryLabel}
                  </Sans>
                </TextWrap>
              )
            })
          }}
        </Responsive>
      </BorderBox>
    )
  }
}

Update market insights to be RN safe(r)
Update market insights to be RN safe(r)