import React from 'react';
import {View} from 'react-native';
import {CardContainer, Image, Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface CommunityHeaderProps {
  logo: string;
  instanceName: string;
}

export function CommunityHeader({logo, instanceName}: CommunityHeaderProps) {
  const {theme} = useTheme();
  return (
    <View style={styles.logoContentContainer}>
      <CardContainer style={styles.logoContainer}>
        <Image
          containerStyle={styles.logoImage}
          style={styles.logoImageContent}
          source={{uri: logo}}
          contentFit="contain"
        />
      </CardContainer>
      <Typography
        align="center"
        variant="xxs"
        color={theme.text.neutral.lighter}>
        {instanceName}
      </Typography>
    </View>
  );
}