import React from 'react';
import { Element } from '@tempi/core-editor';
import {
  TopBannerEditor,
  ColEditor,
  RowEditor,
  WidthTypeEnum,
  getColWidthProps,
  ParagraphEditor,
} from '@tempi/core-elements';

const TopBanner_OneImage = () => {
  return (
    <Element canvas is={TopBannerEditor}>
      <Element
        canvas
        is={RowEditor}
        widthType={WidthTypeEnum.full}
        contentWidthType={WidthTypeEnum.fixed}
        commonStyle={{
          background: '#ef7043',
          padding: {
            top: 8,
            bottom: 8,
            left: 16,
            right: 16,
          },
        }}
        row={{
          commonStyle: {
            maxWidth: 1232,
          },
        }}
      >
        <Element canvas is={ColEditor} {...getColWidthProps(12)}>
          <ParagraphEditor
            text={`<p style="color: rgba(255,255,255,1); text-align: center"><strong>✨ Limited Time Only 50% Off ✨</strong></p>`}
          />
        </Element>
      </Element>
    </Element>
  );
};

export default TopBanner_OneImage;