/**
 * Community screen for PixieSprout (placeholder).
 */
import React from 'react';
import {
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import { dark } from '../constants/theme';
import { Card, Pill } from '../components/BaseUI';
import type { ImageSourcePropType } from 'react-native';

type Props = {
  HeaderComponent: React.ComponentType<{ title: string }>;
  ScreenComponent: React.ComponentType<{ children: React.ReactNode }>;
  avatar: ImageSourcePropType;
  basil: ImageSourcePropType;
};

export function CommunityScreen({ HeaderComponent: Header, ScreenComponent: Screen, avatar, basil }: Props) {
  return (
    <Screen>
      <Header title="Community" />
      <View style={s.filterRow}><Pill active>For You</Pill><Pill>Following</Pill><Pill>Questions</Pill><Pill>Wins</Pill></View>
      <Card>
        <View style={s.postHead}><Image source={avatar} style={s.avatarImg} /><View><Text style={s.rowTitle}>PlantParent_88</Text><Text style={s.small}>2h ago</Text></View></View>
        <Text style={s.bold}>My Basil is thriving!</Text>
        <Image source={basil} style={s.postImage} />
        <Text style={s.reactions}>24 likes     7 comments</Text>
      </Card>
    </Screen>
  );
}

const s = StyleSheet.create({
  filterRow: { flexDirection: 'row',
    flexWrap: 'wrap', gap: 8, paddingHorizontal: 18, marginBottom: 12 },
  postHead: { flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 10 },
  avatarImg: { width: 40, height: 40, borderRadius: 20 },
  rowTitle: { color: dark, fontSize: 14, fontWeight: '800' },
  small: { color: '#78694B', fontSize: 11, marginTop: 2 },
  bold: { color: dark, fontSize: 16, fontWeight: '900', marginBottom: 8 },
  postImage: { width: '100%', height: 200, borderRadius: 14, marginBottom: 8 },
  reactions: { color: '#78694B', fontSize: 12 },
});