import React from 'react';
import Cookies from 'js-cookie';
import { createNamespace } from '../../../../tools/namingTools';
import ButtonIcon from '../../../../atoms/button-icon/ButtonIcon';
import './styles/PreviewBanner.scss';

const n = createNamespace('PreviewBanner');

const PreviewBanner = () => {
    const getBuilderData = Cookies.get('AppDirect-Builder-Version');
    if (!getBuilderData) {
        return null;
    }
    const { isLive, name, publishedDate } = JSON.parse(getBuilderData);
    const handleButtonClick = () => { window.location.href = '/branding/themes'; };
    return (
        <div>
            <div {...n('closePreview').props}>
                <ButtonIcon theme="white" onClick={handleButtonClick} icon="close" />
                <div {...n('previewInformation').props}>

                    <div>
                        { isLive && <div {...n('liveStatus').props} /> }
                        {name}
                    </div>
                    <div {...n('publishedDate').props}>{publishedDate}</div>
                </div>
            </div>
        </div>
    );
};

export default PreviewBanner;
