import React from 'react';
import _isEqual from 'lodash/isEqual';
import { StyleSheet, View } from 'react-native';
import InsitutionCard from './InstitutionCard';
import { Institution } from '../../types';
import { ScrollView } from 'react-native-gesture-handler';

interface InstitutionsSummaryProps {
  institutions: Array<Institution>;
  onSelect: (id: string) => void;
}

const InstitutionsSummary = React.memo(
  (props: InstitutionsSummaryProps) => {
    const { institutions, onSelect } = props;

    return (
      <ScrollView>
        <View style={styles.summary}>
          {institutions.map(institution => (
            <InsitutionCard
              key={institution.id}
              imageUrl={institution.imageUrl!}
              id={institution.id!}
              onSelect={onSelect}
            />
          ))}
        </View>
      </ScrollView>
    );
  },
  (prevProps, nextProps) => _isEqual(prevProps, nextProps),
);

const styles = StyleSheet.create({
  summary: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
  },
});

export default InstitutionsSummary;