import React from 'react';
import { View, Text, ScrollView, StyleSheet, SafeAreaView } from 'react-native';

const ENTRIES = [
  { day: 'Today', text: 'Slow morning coffee and a quiet house before everyone woke up.', emoji: '☕' },
  { day: 'Yesterday', text: 'A long walk that turned into a two-hour conversation with an old friend.', emoji: '🍂' },
  { day: 'Sunday', text: 'Finished the book I have been savouring for weeks.', emoji: '📖' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>GRATITUDE</Text>
        <Text style={s.h1}>What went well?</Text>
        <View style={s.prompt}>
          <Text style={s.promptText}>Name three small things you are thankful for today.</Text>
          <View style={s.promptBtn}><Text style={s.promptBtnT}>Write today's entry</Text></View>
        </View>
        <Text style={s.streak}>🔥 9 day streak</Text>
        {ENTRIES.map((e, i) => (
          <View key={i} style={s.entry}>
            <Text style={s.entryEmoji}>{e.emoji}</Text>
            <View style={{ flex: 1 }}>
              <Text style={s.entryDay}>{e.day}</Text>
              <Text style={s.entryText}>{e.text}</Text>
            </View>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#120C0C' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#FCA5A5', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4, marginBottom: 22 },
  prompt: { backgroundColor: '#201415', borderRadius: 22, padding: 22, borderWidth: 1, borderColor: '#3A2425' },
  promptText: { color: '#F0D8D8', fontSize: 17, lineHeight: 24, fontWeight: '500' },
  promptBtn: { backgroundColor: '#FCA5A5', borderRadius: 16, paddingVertical: 14, alignItems: 'center', marginTop: 18 },
  promptBtnT: { color: '#2A1414', fontSize: 15, fontWeight: '800' },
  streak: { color: '#D08A8A', fontSize: 14, fontWeight: '700', marginVertical: 24 },
  entry: { flexDirection: 'row', backgroundColor: '#181011', borderRadius: 18, padding: 18, marginBottom: 14 },
  entryEmoji: { fontSize: 26, marginRight: 14 },
  entryDay: { color: '#FCA5A5', fontSize: 13, fontWeight: '700' },
  entryText: { color: '#D8C8C8', fontSize: 15, lineHeight: 22, marginTop: 5 },
});