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

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { formatDate } from '../util'

const Styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  dateIcon: {
    marginRight: 8,
  },

  date: {
    ...TextStyles.tinyCaps,
    color: colors.metals.metal0,
  },
})

export const CalendarDate: React.FC<{
  date: string
  style?: StyleProp<ViewStyle>
}> = ({ date, style }) => {
  return (
    <View style={[Styles.container, style]}>
      <Text style={Styles.date}>{formatDate(date)}</Text>
    </View>
  )
}