import * as React from 'react';
import { ValidationState } from '../../models/Validation';
import { Colors } from '../../models/colors';
import { leftDot } from './withLeftDot.style';

interface WithLeftDotProps {
	valid: ValidationState;
	palette?: Colors;
	customStyle?: any;
	hideLeftDot?: boolean;
}

class WithLeftDot extends React.PureComponent<WithLeftDotProps> {
	render() {
		return this.props.hideLeftDot ? (
			this.props.children
		) : (
			<div className={leftDot(this.props.palette, this.props.valid, this.props.customStyle)}>
				{this.props.children}
			</div>
		);
	}
}

export default WithLeftDot;