import React from 'react';
import {
	StyleSheet,
	View,
} from 'react-native';
import { ContentGridEmpty } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import i18n from '~/locale/i18n';
import OfflineEmpty from '~comp/offlineEmpty';

const styles = StyleSheet.create({
	container: {
		marginLeft: 20,
		marginRight: 20,
	},
});

export const GooglePhotosEmpty = (props) => (props.isConnected ? (
	<View style={styles.container}>
		<ContentGridEmpty>
			<ContentGridEmpty.Icon name="photos" />
			<ContentGridEmpty.Title>{i18n.t('contents.noPhotos')}</ContentGridEmpty.Title>
			<ContentGridEmpty.Description>{i18n.t('contents.noPhotosInGoogle')}</ContentGridEmpty.Description>
		</ContentGridEmpty>
	</View>
) : (
	<OfflineEmpty {...props} />
));

GooglePhotosEmpty.propTypes = {
	isConnected: PropTypes.bool.isRequired,
};
