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

const FRIENDS = [
  { name: 'Leah', avatar: '🦊', bal: 24.5 },
  { name: 'Marcus', avatar: '🐻', bal: -12.0 },
  { name: 'Priya', avatar: '🦉', bal: 8.75 },
  { name: 'Tom', avatar: '🐧', bal: -31.2 },
];
const ITEMS = [
  { name: 'Dinner at Nori', who: 'You paid', amt: 96.0, icon: '🍣' },
  { name: 'Cab home', who: 'Marcus paid', amt: 24.0, icon: '🚕' },
  { name: 'Groceries', who: 'You paid', amt: 52.4, icon: '🛒' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>WEEKEND TRIP</Text>
        <Text style={s.h1}>You are owed</Text>
        <Text style={s.big}>$41.25</Text>
        <View style={s.friends}>
          {FRIENDS.map((f) => (
            <View key={f.name} style={s.friend}>
              <View style={s.av}><Text style={{ fontSize: 24 }}>{f.avatar}</Text></View>
              <Text style={s.fname}>{f.name}</Text>
              <Text style={[s.fbal, { color: f.bal < 0 ? '#FF7A7A' : '#22C55E' }]}>{(f.bal < 0 ? '-$' : '+$') + Math.abs(f.bal).toFixed(2)}</Text>
            </View>
          ))}
        </View>
        <Text style={s.section}>Recent</Text>
        {ITEMS.map((it, i) => (
          <View key={i} style={s.item}>
            <View style={s.itemIcon}><Text style={{ fontSize: 20 }}>{it.icon}</Text></View>
            <View style={{ flex: 1 }}>
              <Text style={s.itemName}>{it.name}</Text>
              <Text style={s.itemWho}>{it.who}</Text>
            </View>
            <Text style={s.itemAmt}>{'$' + it.amt.toFixed(2)}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#071416' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#06B6D4', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#9FE9F5', fontSize: 17, fontWeight: '600', marginTop: 8 },
  big: { color: '#fff', fontSize: 46, fontWeight: '800', letterSpacing: -1, marginTop: 2 },
  friends: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 24 },
  friend: { alignItems: 'center', flex: 1 },
  av: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#0E2429', alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: '#16363D' },
  fname: { color: '#C9EEF3', fontSize: 13, marginTop: 8 },
  fbal: { fontSize: 13, fontWeight: '700', marginTop: 3 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 30, marginBottom: 10 },
  item: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#0C1E22', borderRadius: 16, padding: 14, marginBottom: 12 },
  itemIcon: { width: 44, height: 44, borderRadius: 13, backgroundColor: '#0E2429', alignItems: 'center', justifyContent: 'center', marginRight: 14 },
  itemName: { color: '#EDEDF2', fontSize: 16, fontWeight: '600' },
  itemWho: { color: '#5E8A90', fontSize: 13, marginTop: 2 },
  itemAmt: { color: '#EDEDF2', fontSize: 16, fontWeight: '700' },
});