import React from 'react';
import cx from 'classnames';

const CLASSNAME = 'Highlight';

interface Props {
    variant?: 'error' | 'warning' | 'success' | 'info' | 'revision' | 'neutral';
    className?: string;
    style?: React.CSSProperties;
    testId?: string;
    children: React.ReactNode;
}

/**
 * Highlight draws attention to a piece of information using semantic colours by adding a background.
 *
 * @type atom
 * @status live
 * @tags feedback
 */
export const Highlight: React.FC<Props> = ({
    className,
    style,
    testId = CLASSNAME,
    variant = 'neutral',
    children,
}) => (
    <div
        className={cx(CLASSNAME, className, `${CLASSNAME}-${variant}`)}
        style={style}
        data-testid={testId}
    >
        {children}
    </div>
);