import {
	observer,
} from 'mobx-react';

@observer
export default class Header extends React.Component {
	render() {
		const {
			store
		} = this.props, {
			is_head_show,
			is_head_selected,
			body_head_style,
			head_datas,
			handleCardItemClick,
		} = store, {
			title
		} = head_datas;

		if (!is_head_show) return null;

		return (
			<div 
				id="head"
				className={`editor-body-head${is_head_selected ? " selected" : ""}`} 
				style={body_head_style} 
				onClick={e => handleCardItemClick(e, "head")}
				dangerouslySetInnerHTML = {{ __html: title  }}
			/>
		)
	}
}