import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'
import { colorsV2 } from '../Colors'
import { Strings } from '../i18n'
import { TextStylesV2 } from '../Styles'

export const SelectedMarketDivider: React.FC<{
  style?: StyleProp<ViewStyle>
}> = ({ style }) => (
  <View
    style={[
      {
        borderTopWidth: 2,
        borderColor: colorsV2.metals.metal1,
        paddingTop: 24,
      },
      style,
    ]}
  >
    <Text
      style={[
        TextStylesV2.tiny,
        {
          color: colorsV2.offWhite,
          textTransform: 'uppercase',
        },
      ]}
    >
      {Strings.Shared.SelectedMarket}
    </Text>
  </View>
)