import React, {memo, useCallback, useMemo} from 'react';
import {PressableCardContainer, Typography, Image} from '@components';
import {Instance} from '@interfaces/instance';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  instance: Instance;
  onPress: (instance: Instance) => void;
}

function CommunityCard({instance, onPress}: Props) {
  const {theme} = useTheme();
  const onPressCommunity = useCallback(
    () => onPress(instance),
    [onPress, instance],
  );

  const source = useMemo(() => ({uri: instance.logo}), [instance.logo]);

  return (
    <PressableCardContainer style={styles.cardStyle} onPress={onPressCommunity}>
      <Image
        style={styles.image}
        source={source}
        contentFit="contain"
        cachePolicy={'memory'}
      />
      <Typography
        numberOfLines={1}
        align="center"
        variant="xxs"
        color={theme.text.neutral.lighter}>
        {instance.name}
      </Typography>
    </PressableCardContainer>
  );
}

export default memo(CommunityCard);