import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { Styles, TextStyles } from '../Styles'
import { colors } from '../Colors'
import { formatDateInterval } from '../util'

const styles = StyleSheet.create({
  dates: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 12,
    ...Styles.screenHorizontalPaddingWithNegation,
    borderTopColor: colors.midGray,
    borderTopWidth: 1,
  },
  date: {
    ...TextStyles.micro,
    textTransform: 'uppercase',
  },
})

export const GraphDateLabels: React.FC<{
  startDate: string
  endDate: string
}> = ({ startDate, endDate }) => {
  const dateStrings = formatDateInterval(startDate, endDate)
  return (
    <View style={styles.dates}>
      {dateStrings.map((s, i) => (
        <Text style={styles.date} key={i}>
          {s}
        </Text>
      ))}
    </View>
  )
}