import * as React from 'react'
import * as cx from 'classnames'
import { ValidationIconProps } from './interfaces'
import { Icon } from '../icon'

const styles = require('../../../src/components/form-field/styles.scss')

export const ValidationIcon = ({ valid, error }: ValidationIconProps): JSX.Element | null => {
    if (valid || error) {
        return (
            <div className={styles.validationIcon}>
                <Icon
                    icon={valid ? 'success' : 'error'}
                    className={cx(
                        valid ? styles.validationIconValid : styles.validationIconError,
                    )}
                    size={18} />
            </div>
        )
    }
    return null
}