import { getPositionStyles } from './badgeUtils';

export const generateHtmlBadgeHtml = (badge_settings) => {
  const timestamp = Date.now();

  return `<div class="cpbw_html_badge_main_container_${timestamp}">
    ${badge_settings.htmlContent}
    <style>
      ${badge_settings.cssContent}
      .cpbw_html_badge_main_container_${timestamp} {
        margin-top:${badge_settings.marginTop}px;
        margin-right:${badge_settings.marginRight}px;
        margin-bottom:${badge_settings.marginBottom}px;
        margin-left:${badge_settings.marginLeft}px;
        ${getPositionStyles(badge_settings.position)}
        position: absolute;
        z-index: ${badge_settings.zIndex};
      }
    </style>
    </div>`;
};

export const htmlBadgeDefaultSettings = {
  position: 'top-right',
  marginTop: 8,
  marginRight: 8,
  marginBottom: 8,
  marginLeft: 8,
  zIndex: 90,
  htmlContent: `<div class="cpbw-badge-container-${Date.now()}">\n  Winter Sale\n</div>\n`,
  cssContent: `.cpbw-badge-container-${Date.now()} {\n  color: white; \n  background: linear-gradient(to right, #0A3981, #1F509A);\n  border: 2px solid #3e7fe0;\n  padding: 4px 16px;\n  border-radius: 20px;\n  font-size: 14px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.cpbw-badge-container-${Date.now()}:hover {\n  background: linear-gradient(to right, #1F509A, #0A3981);\n}`,
};
