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

interface MomentTileProps {
  moment: MomentType;
}
const MomentTile: React.FC<MomentTileProps> = ({moment}) => {
  const navigation = useNavigation();
  const {path_hash} = moment;
  return (
    <TouchableOpacity
      onPress={() => {
        navigation.navigate('IndividualMoment', {moment});
      }}>
      <View style={styles.image}>
        <Image style={styles.image} source={{uri: path_hash}} />
      </View>
    </TouchableOpacity>
  );
};

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