import { useNavigation, useRoute } from '@react-navigation/native';
import React, { useLayoutEffect } from 'react';
import { Dimensions, View } from 'react-native';

import { NavProps, RouteProps } from '../../../../../../../../../../components/Routes/Routes';
import Image from '../../../../../../../../../../services/ScalableImage/index';

const EducationImage = () => {
  const { imageName, imageContent } = useRoute<RouteProps<'EducationImage'>>().params;
  const navigation = useNavigation<NavProps>();

  useLayoutEffect(() => {
    navigation.setOptions({
      title: imageName,
    });
  }, [navigation, imageName]);
  return (
    <View className="mx-4 mb-4 flex-1 items-center justify-center bg-primary-bg">
      <View>
        <Image
          className={`rounded`}
          width={Dimensions.get('window').width - 32}
          source={{ uri: `data:image/png;base64,${imageContent}` }}
        />
      </View>
    </View>
  );
};

export default EducationImage;
