import * as React from 'react';
import {SiteImage} from '../site-image';

import {ImageStyle, Image, TouchableOpacity} from 'react-native';
import {useSiteSettings} from '../../providers/site';

const style: ImageStyle = {
  flex: 1,
  maxWidth: 150,
  resizeMode: 'contain',
};

export const Logo = ({src}: {src: string}) => {
  const {regions} = useSiteSettings();

  const onLogoPress = React.useCallback(() => {}, [src]);

  return (
    <TouchableOpacity onPress={onLogoPress} style={{flex: 1}}>
      {src ? (
        <Image source={{uri: src}} />
      ) : (
        <SiteImage src={regions.header.mobile_logo} style={style} />
      )}
    </TouchableOpacity>
  );
};