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

@inject('hrmHolidySettingNew')
@observer
class Tab extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const {
			tab,
			tabProps,
			handleTabClick,
		} = this.props.hrmHolidySettingNew, {
			datas,
		} = tabProps, {
			selectedKey
		} = tab;

		return (
			<div>{
				datas.map( (data,index) => {
					const {
						key,
						title
					} = data;

					const style = {
						cursor: 'pointer'
					};

					if(key === selectedKey){
						Object.assign(style,{
							color: '#2DB7F5'
						});
					}

					if(index === 1){
						Object.assign(style,{
							marginLeft: 10
						});
					}

					return (
						<span onClick={() => handleTabClick(key)} style={style}>{title}</span>
					) 
				})
			}</div>
		);
	}

}

export default Tab