import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SVGIcon } from 'ca-ui-toolkit';
import './WelcomeLabel.scss';

export class WelcomeLabel extends Component{
	static propTypes = {
		/** Custom class name(s) */
		className: PropTypes.string,
		labels: PropTypes.object.isRequired,
		themeValues: PropTypes.object
	};

	static defaultProps = {

	}

	constructor(props) {
		super(props);
	}

	renderLogo() {
		const { themeValues } = this.props;
		if (themeValues && themeValues.images && themeValues.images.brandIcon && themeValues.images.brandIcon !== 'common-CA_Avatar_Colour_64' ) {
			return (<img className="homeWelcomeLogo" src={themeValues.images.brandIcon} />);
		}

		return (
			<SVGIcon className='homeWelcomeLogo' size='xlarge' iconId='common-CA_Avatar_Colour_64'></SVGIcon>
		);
	}

	render() {
		return (
			<div className='WelcomeLabel'>
				{ this.renderLogo() }
				<div className='promptLabel'>
					<div className='primaryWelcomeMsg'>
						{this.props.labels.welcome}
					</div>
					<div className='secondaryWelcomeMsg'>
						{this.props.labels.secondaryWelcomeMsg}
					</div>
				</div>
			</div>
		);
	}
}