import * as React from "react";
import * as _ from 'lodash';
import * as DefaultStyles from './style';

export interface UnderlineAnimationProps {
    children: JSX.Element;
    styles?: UnderlineAnimationStyles;
    id?: string;
    name?: string
}

export interface UnderlineAnimationStyles {
    UnderlineWrapper?: any;
    Underline?: any;
}

const UnderlineAnimation = (props: UnderlineAnimationProps): JSX.Element => {
    const Styles: UnderlineAnimationStyles = _.merge(DefaultStyles, props.styles);
    return (
        <Styles.UnderlineWrapper id={props.id && props.id + '-underline-wrapper-div'} name={props.name && props.name + '-underline-wrapper-div'}>
            {props.children}
            <Styles.Underline id={props.id && props.id + '-underline-span'} name={props.name && props.name + '-underline-span'} />
        </Styles.UnderlineWrapper >
    );
};

export default UnderlineAnimation;