import React from 'react';
import {View, Text, ScrollView, StyleSheet} from 'react-native';
import SuggestedUser from './SuggestedUser';

/**
 * Search Screen for user recommendations and a search
 * tool to allow user to find other users
 */

interface SuggestedSectionProps {
  title: string;
  users: Array<string>;
}
const SuggestedSection: React.FC<SuggestedSectionProps> = ({title, users}) => {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>{title}</Text>
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        {users.map((name, key) => (
          <SuggestedUser {...{name, key}} style={styles.user} />
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginBottom: 30,
  },
  header: {
    fontWeight: '600',
    fontSize: 20,
    color: '#fff',
    marginBottom: 20,
  },
  user: {
    marginHorizontal: 15,
  },
});

export default SuggestedSection;