import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { Strings } from '../i18n'

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