import React from 'react';
import { formatMessage } from '@theorchard/suite-i18n';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';

const CLASS_NAME = 'InternalUserCard';

export interface Props {
    children: React.ReactNode;
    className?: string;
    testId?: string;
}

export const InternalUserCard: React.FC<Props> = ({ className, testId = CLASS_NAME, children }) => (
    <div className={cx(CLASS_NAME, className)} data-testid={testId}>
        <div className="employee-hint suite-text-small">
            <GlyphIcon name="user" size={16} />
            <span>{formatMessage('footerUserModal_employeeHint')}</span>
        </div>

        {children}
    </div>
);