import styles from '!raw-loader!sass-loader!./styles/app-service-header.scss';

class AppServieHeader extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		const root = this.attachShadow({ mode: 'open' });

		const style = document.createElement('style');
		style.textContent = styles;
		root.appendChild(style);

		const div = document.createElement('div');
		div.className = 'header';

		const info = document.createElement('div');
		info.className = 'header_info';

		const title = document.createElement('p');
		title.className = 'header_info_title';
		title.innerText = this.dataset.title;
		info.appendChild(title);

		const icon = document.createElement('img');
		icon.className = 'header_info_icon';
		icon.src = this.dataset.icon;
		icon.alt = 'icon';
		info.appendChild(icon);

		const description = document.createElement('p');
		description.className = 'header_description';
		description.innerText = this.dataset.description;
		div.appendChild(description);

		div.appendChild(info);

		root.appendChild(div);

		const underDescription = document.createElement('p');
		underDescription.className = 'header_underDescription';
		underDescription.innerText = this.dataset.description;
		root.appendChild(underDescription);
	}

	static get observedAttributes() {
		return ['data-title', 'data-icon', 'data-description'];
	}
}

customElements.define('app-service-header', AppServieHeader);