import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { colors } from '../../theme/colors';

interface InstitutionCardProps {
  id: string;
  imageUrl: string;
  onSelect: (id: string) => void;
}

const InsitutionCard = (props: InstitutionCardProps) => {
  const { id, imageUrl, onSelect } = props;

  const handlePress = () => onSelect(id);

  return (
    <TouchableOpacity style={styles.container} onPress={handlePress}>
      <View style={styles.image}>
        <Image
          resizeMethod="scale"
          resizeMode="contain" //@ts-ignore
          source={{ uri: imageUrl, width: '100%', height: '100%' }}
        />
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: colors.greyVeryLight,
    paddingVertical: responsiveHeight(1.5),
    paddingHorizontal: responsiveWidth(4),
    marginVertical: responsiveHeight(0.8),
    marginHorizontal: responsiveWidth(0.9),
    borderRadius: 5,
  },

  image: {
    width: responsiveWidth(33),
    height: responsiveHeight(8),
  },
});

export default InsitutionCard;