import { Pressable, StyleSheet, Text } from 'react-native'

const Note = ({ note, setEdit }) => {
  const formatDate = d => d.replace('T',' ').replace(/\..*Z/, '')

  return (
    <Pressable
      style={styles.note}
      onPress={() => setEdit(note)}
    >
      <Text style={styles.title}>{note.title}</Text>
      <Text style={styles.dates}>{`Created at: ${formatDate(note.created_at)}`}</Text>
      <Text style={styles.dates}>{`Updated at: ${formatDate(note.updated_at)}`}</Text>
    </Pressable>
  )
}

const styles = StyleSheet.create({
  note: {
    textAlign: 'left',
    padding: 15,
    width: '100%',
    backgroundColor: 'black',
  },
  title: {
    color: 'white',
    fontSize: 18,
  },
  dates: {
    color: '#bbb',
    fontSize: 10,
  },
});

export default Note