import React, { FC } from 'react';
import cx from 'classnames';
import { AnalyticsIcon } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';

const CLASSNAME = 'ContentPanel';

export const EMPTY_MESSAGE = 'error.noData.message';
export const TEST_ID = CLASSNAME;

export interface Props {
    className?: string;
    isEmpty?: boolean;
}

const ContentPanel: FC<Props> = ({
    className, isEmpty, children,
}) => (
    <div className={cx(CLASSNAME, className, { [`${CLASSNAME}-empty`]: isEmpty })} data-testid={className}>
        {!isEmpty ? children : (
            <div className={`${CLASSNAME}-empty-content`}>
                <AnalyticsIcon />
                <div className={`${CLASSNAME}-empty-message`}>
                    {formatMessage(EMPTY_MESSAGE)}
                </div>
            </div>
        )}
    </div>
);

export default ContentPanel;