import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
import {MomentType, ScreenType} from '../../types';

interface MomentTileProps {
  moment: MomentType;
  userXId: string | undefined;
  screenType: ScreenType;
}
const MomentTile: React.FC<MomentTileProps> = ({
  moment,
  userXId,
  screenType,
}) => {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      onPress={() => {
        navigation.push('IndividualMoment', {
          moment,
          screenType,
          userXId,
        });
      }}>
      <View style={styles.image}>
        <Image style={styles.image} source={{uri: moment.thumbnail_url}} />
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  image: {
    aspectRatio: 1,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
    marginRight: 5,
  },
});
export default MomentTile;