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

const POSTS = [
  { id: 1, who: 'Aria', av: '🦋', when: '2h', text: 'Shipped my first app this weekend. Tiny, but it is live and I am proud!', likes: 42, replies: 8 },
  { id: 2, who: 'Ken', av: '🐢', when: '5h', text: 'What is everyone reading lately? Looking for something on focus.', likes: 17, replies: 23 },
  { id: 3, who: 'Mira', av: '🌙', when: '1d', text: 'Friendly reminder to drink water and take a walk today. 💚', likes: 88, replies: 5 },
];

export default function App() {
  const [liked, setLiked] = useState<Record<number, boolean>>({});
  return (
    <SafeAreaView style={s.safe}>
      <View style={s.head}><Text style={s.h1}>Makers Circle</Text><View style={s.avatarMe}><Text>🙂</Text></View></View>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        {POSTS.map((p) => {
          const on = liked[p.id];
          return (
            <View key={p.id} style={s.card}>
              <View style={s.cardHead}>
                <View style={s.av}><Text style={{ fontSize: 20 }}>{p.av}</Text></View>
                <View><Text style={s.who}>{p.who}</Text><Text style={s.when}>{p.when} ago</Text></View>
              </View>
              <Text style={s.text}>{p.text}</Text>
              <View style={s.actions}>
                <Pressable onPress={() => setLiked((l) => ({ ...l, [p.id]: !l[p.id] }))} style={s.action}>
                  <Text style={[s.actionIcon, on && { color: '#FF6B9D' }]}>{on ? '♥' : '♡'}</Text>
                  <Text style={s.actionText}>{p.likes + (on ? 1 : 0)}</Text>
                </Pressable>
                <View style={s.action}><Text style={s.actionIcon}>💬</Text><Text style={s.actionText}>{p.replies}</Text></View>
                <View style={s.action}><Text style={s.actionIcon}>↗</Text></View>
              </View>
            </View>
          );
        })}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0C0A12' },
  head: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingTop: 58, paddingHorizontal: 22, paddingBottom: 12 },
  h1: { color: '#fff', fontSize: 26, fontWeight: '800' },
  avatarMe: { width: 38, height: 38, borderRadius: 19, backgroundColor: '#1A1626', alignItems: 'center', justifyContent: 'center' },
  scroll: { padding: 18 },
  card: { backgroundColor: '#15111E', borderRadius: 20, padding: 18, marginBottom: 14 },
  cardHead: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
  av: { width: 42, height: 42, borderRadius: 21, backgroundColor: '#211A33', alignItems: 'center', justifyContent: 'center', marginRight: 12 },
  who: { color: '#fff', fontSize: 16, fontWeight: '700' },
  when: { color: '#7A6E96', fontSize: 13, marginTop: 2 },
  text: { color: '#DAD2EC', fontSize: 16, lineHeight: 23 },
  actions: { flexDirection: 'row', gap: 26, marginTop: 16 },
  action: { flexDirection: 'row', alignItems: 'center', gap: 7 },
  actionIcon: { color: '#9A8CC0', fontSize: 18 },
  actionText: { color: '#9A8CC0', fontSize: 14, fontWeight: '600' },
});