import React from 'react';
import {
  View,
  ScrollView,
  Text,
  StyleSheet,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#fff',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  headerTitle: {
    fontSize: 24,
    fontWeight: '700',
    color: '#000',
    marginBottom: 8,
  },
  section: {
    paddingHorizontal: 16,
    marginTop: 16,
  },
  communityCard: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  communityCardHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  communityIcon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  communityTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#000',
  },
  communityDescription: {
    fontSize: 13,
    color: '#666',
    lineHeight: 20,
    marginBottom: 12,
  },
  memberCount: {
    fontSize: 12,
    color: '#999',
    marginBottom: 10,
  },
  joinButton: {
    backgroundColor: '#0066cc',
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 6,
    alignItems: 'center',
  },
  joinButtonText: {
    color: '#fff',
    fontSize: 13,
    fontWeight: '600',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#000',
    marginBottom: 12,
  },
});

export default function CommunityScreen() {
  const communities = [
    {
      title: 'Support Group',
      description: 'Join our growing community of folks navigating chronic illness and cancer. Connect, share, and find strength together.',
      members: '2,341 members',
      icon: '👥',
    },
    {
      title: 'The Living Room',
      description: 'Exclusive support circle for members. A safe space to share your journey, connect with others, and find support.',
      members: '856 members',
      icon: '🛋️',
    },
    {
      title: 'The Journal',
      description: 'Read inspiring stories from our community members as they navigate their journeys. Share your own story.',
      members: '1,203 stories',
      icon: '📖',
    },
    {
      title: 'Podcast Community',
      description: 'Discuss episodes of our podcast and connect with listeners who share your experiences.',
      members: '432 members',
      icon: '🎙️',
    },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Community</Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Join Our Communities</Text>
        </View>

        {communities.map((community, index) => (
          <View key={index} style={styles.section}>
            <View style={styles.communityCard}>
              <View style={styles.communityCardHeader}>
                <View style={styles.communityIcon}>
                  <Text style={{ fontSize: 20 }}>{community.icon}</Text>
                </View>
                <Text style={styles.communityTitle}>{community.title}</Text>
              </View>
              <Text style={styles.communityDescription}>{community.description}</Text>
              <Text style={styles.memberCount}>{community.members}</Text>
              <TouchableOpacity style={styles.joinButton}>
                <Text style={styles.joinButtonText}>Join Community</Text>
              </TouchableOpacity>
            </View>
          </View>
        ))}

        <View style={[styles.section, { marginBottom: 40 }]}>
          <View style={styles.communityCard}>
            <Text style={styles.communityTitle}>Community Guidelines</Text>
            <Text style={[styles.communityDescription, { marginTop: 8 }]}>
              • Be respectful and supportive{'\n'}
              • Share your authentic story{'\n'}
              • Respect others' privacy{'\n'}
              • No medical advice{'\n'}
              • Check in, not out
            </Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}