import React from 'react';
import styles from './OfflineBanner.scss';
import { default as IReactComponentProps } from '../../../common/structures/IReactComponentProps';
import OfflineIcon from '../../icons/svgs/OfflineIcon';

export interface IOfflineBannerProps extends IReactComponentProps {
	/** Used to show offline banner.*/
	offline: boolean;
}

export const OfflineBanner: React.FC<IOfflineBannerProps> = (props) => {
	if (!props.offline) {
		return null;
	}

	return (
		<div role="status" aria-label="Offline" id={props.id} style={props.style} className={styles.OfflineBanner_container}>
			<OfflineIcon aria-hidden />
			<div className={styles.OfflineBanner_text}>No internet connection.</div>
		</div>
	);
};

export default OfflineBanner;