import type { FC } from 'react';
import React, { memo } from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';

const CLASS_NAME = 'ArtistDropdownInfoMessage';

interface Props {
    content: string | JSX.Element | (string | JSX.Element)[];
    showClose?: boolean;
    onClose?: () => void;
}

const ArtistDropdownInfoMessage: FC<Props> = ({ content, showClose, onClose }) => (
    <div className={CLASS_NAME}>
        <div className={`${CLASS_NAME}-title`}>
            <div className={`${CLASS_NAME}-title-icon`}>
                <GlyphIcon name="info" size={16} />
            </div>
        </div>
        <div className={`${CLASS_NAME}-content`}>{content}</div>
        {showClose && (
            <div className={`${CLASS_NAME}-close`}>
                <div
                    role="button"
                    className={`${CLASS_NAME}-close-icon`}
                    onClick={onClose}
                    onKeyDown={onClose}
                    tabIndex={0}
                >
                    <GlyphIcon name="close" size={16} />
                </div>
            </div>
        )}
    </div>
);

export default memo(ArtistDropdownInfoMessage);