import { getPositionStyles } from './badgeUtils';

export const generateCustomBadgeHtml = (badge_settings, identifier) => {
  const class_name = badge_settings.class ? badge_settings.class : ' ';
  return `<div class="badge_container_${identifier}">
    <div class="badge_content_${identifier} ${class_name}">${badge_settings.text}</div>

  <style>
    .badge_container_${identifier} {
        margin-top:${badge_settings.marginTop}px;
        margin-right:${badge_settings.marginRight}px;
        margin-bottom:${badge_settings.marginBottom}px;
        margin-left:${badge_settings.marginLeft}px;
        position: absolute;
        ${getPositionStyles(badge_settings.position)}
        z-index: ${badge_settings.zIndex};
        opacity: ${badge_settings.opacity / 100};
    }

    .badge_content_${identifier} {
        color: ${badge_settings.color};
        background: ${badge_settings.background};

        ${
          badge_settings.padding
            ? `padding-top: ${badge_settings.paddingTop}px;
               padding-right: ${badge_settings.paddingRight}px;
               padding-bottom: ${badge_settings.paddingBottom}px;
               padding-Left: ${badge_settings.paddingLeft}px; `
            : `height: ${badge_settings.height}px;
               width: ${badge_settings.width}px;`
        }
        
        border-top-left-radius: ${badge_settings.borderTopLeftRadius}px;
        border-top-right-radius: ${badge_settings.borderTopRightRadius}px;
        border-bottom-left-radius: ${badge_settings.borderBottomLeftRadius}px;
        border-bottom-right-radius: ${badge_settings.borderBottomRightRadius}px;
        font-size: ${badge_settings.fontSize}px;
        font-weight: ${badge_settings.fontWeight};
        border: ${badge_settings.borderWidth}px solid ${badge_settings.borderColor};
        ${badge_settings.clipValue && `clip-path: ${badge_settings.clipValue}`};
        display: flex;
        align-items: center;
        justify-content: center;
      }
  </style>
  </div>`;
};

export const CUSTOM_BADGE_FIXED_PROPERTY = {
  marginTop: 8,
  marginRight: 8,
  marginBottom: 8,
  marginLeft: 8,
  zIndex: 90,
};

export const CUSTOM_BADGE_TEMPLATES = [
  {
    text: 'NEW',
    position: 'top-right',
    color: '#ffffff',
    background: 'rgba(30, 54, 138, 1)',
    height: '32',
    width: '72',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: 'ON SALE',
    position: 'top-right',
    color: 'rgba(97, 194, 0, 1)',
    background: 'rgb(252, 254, 255)',
    height: '32',
    width: '96',
    opacity: 100,
    borderTopLeftRadius: '6',
    borderTopRightRadius: '6',
    borderBottomLeftRadius: '6',
    borderBottomRightRadius: '6',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '2',
    borderColor: 'rgba(97, 194, 0, 1)',
    clipValue: null,
  },

  {
    text: 'New Arrival',
    position: 'top-right',
    color: 'rgba(255,251,235,1)',
    background: 'linear-gradient(110deg, rgba(245,158,11,1) 0%, rgba(217,119,6,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 18,
    paddingBottom: 4,
    paddingLeft: 18,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 0%, 100% 0%, 94% 25%, 100% 50%, 94% 75%, 100% 100%, 0% 100%, 6% 75%, 0% 50%, 6% 25%)',
  },
  {
    text: 'YOUR TEXT',
    position: 'top-right',
    color: 'rgba(255,255,255,1)',
    background: 'rgba(0,0,0,1)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 6,
    paddingRight: 14,
    paddingBottom: 6,
    paddingLeft: 14,
    fontSize: '13',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue:
      'polygon(0% 0%, 20% 0%, 30% 10%, 70% 10%, 80% 0%, 100% 0%, 100% 20%, 95% 30%, 95% 70%, 100% 80%, 100% 100%, 80% 100%, 70% 90%, 30% 90%, 20% 100%, 0% 100%, 0% 80%, 5% 70%, 5% 30%, 0% 20%)',
  },

  {
    text: 'SALE',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(110deg, rgba(239,68,68,1) 0%, rgba(244,63,94,1) 100%)',
    height: '32',
    width: '72',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: 'HOT',
    position: 'top-right',
    color: '#ffffff',
    background:
      'radial-gradient(ellipse at 30% 50%, rgba(251,146,60,1) 0%, rgba(239,68,68,1) 70%, rgba(185,28,28,1) 100%)',
    height: '32',
    width: '66',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '4',
    borderBottomLeftRadius: '4',
    borderBottomRightRadius: '4',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: 'POPULAR',
    position: 'top-right',
    color: 'rgba(99,102,241,1)',
    background: 'rgba(255,255,255,1)',
    height: '32',
    width: '96',
    opacity: 100,
    borderTopLeftRadius: '999',
    borderTopRightRadius: '999',
    borderBottomLeftRadius: '999',
    borderBottomRightRadius: '999',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '2',
    borderColor: 'rgba(99,102,241,1)',
    clipValue: null,
  },

  {
    text: 'TRENDING',
    position: 'top-right',
    color: 'rgba(168,85,247,1)',
    background: 'linear-gradient(135deg, rgba(168,85,247,0.08) 0%, rgba(236,72,153,0.08) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '4',
    borderBottomLeftRadius: '4',
    borderBottomRightRadius: '4',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '1.5',
    borderColor: 'rgba(168,85,247,1)',
    clipValue: null,
  },

  {
    text: 'BEST PRICE',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(115deg, rgba(13,148,136,1) 0%, rgba(6,182,212,1) 100%)',
    height: '32',
    width: '108',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '4',
    borderBottomLeftRadius: '4',
    borderBottomRightRadius: '4',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: 'LIMITED',
    position: 'top-right',
    color: 'rgba(199,210,254,1)',
    background: 'linear-gradient(110deg, rgba(30,27,75,1) 0%, rgba(79,70,229,1) 100%)',
    height: '32',
    width: '90',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '4',
    borderBottomLeftRadius: '4',
    borderBottomRightRadius: '4',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: 'SOLD OUT',
    position: 'top-right',
    color: 'rgba(255,255,255,1)',
    background: 'linear-gradient(110deg, rgba(30,41,59,1) 0%, rgba(51,65,85,1) 100%)',
    height: '32',
    width: '96',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '4',
    borderBottomLeftRadius: '4',
    borderBottomRightRadius: '4',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '1',
    borderColor: 'rgba(100,116,139,0.3)',
    clipValue: null,
  },

  {
    text: 'SPECIAL PRICE',
    position: 'top-right',
    color: '#ffffff',
    background: 'rgb(217, 18, 18)',
    height: '32',
    width: '136',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '4',
    borderBottomLeftRadius: '4',
    borderBottomRightRadius: '4',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: 'PREMIUM',
    position: 'top-right',
    color: 'rgba(237,233,254,1)',
    background:
      'radial-gradient(ellipse at 40% 35%, rgba(139,92,246,1) 0%, rgba(109,40,217,1) 55%, rgba(46,16,101,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '999',
    borderTopRightRadius: '999',
    borderBottomLeftRadius: '999',
    borderBottomRightRadius: '999',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '1',
    borderColor: 'rgba(167,139,250,0.35)',
    clipValue: null,
  },

  {
    text: '{{discount_percentage}} OFF',
    position: 'top-right',
    color: '#ffffff',
    background:
      'radial-gradient(circle at 35% 40%, rgba(252,165,165,1) 0%, rgba(239,68,68,1) 45%, rgba(127,29,29,1) 100%)',
    height: '32',
    width: '96',
    opacity: 100,
    borderTopLeftRadius: '999',
    borderTopRightRadius: '999',
    borderBottomLeftRadius: '999',
    borderBottomRightRadius: '999',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: '{{discount_percentage}} OFF',
    position: 'top-right',
    color: '#ffffff',
    background:
      'linear-gradient(90deg, rgba(234,1,1,1) 0%, rgba(234,1,1,1) 50%, rgba(10,97,227,1) 50%, rgba(10,97,227,1) 100%)',
    height: '32',
    width: '96',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: '{{brand_name}}',
    position: 'top-right',
    color: 'rgba(148,163,184,1)',
    background: 'rgba(15,23,42,1)',
    height: '32',
    width: '68',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '4',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '700',
    borderWidth: '2',
    borderColor: 'rgba(255,255,255,1)',
    clipValue: null,
  },

  {
    text: '{{tag_name}}',
    position: 'top-right',
    color: 'rgba(6,182,212,1)',
    background: 'rgba(255,255,255,1)',
    height: '32',
    width: '116',
    opacity: 100,
    borderTopLeftRadius: '999',
    borderTopRightRadius: '999',
    borderBottomLeftRadius: '999',
    borderBottomRightRadius: '999',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '2',
    borderColor: 'rgba(6,182,212,1)',
    clipValue: null,
  },

  {
    text: '{{sale_price_with_tax}} · incl. tax',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(120deg, rgba(37,99,235,1) 0%, rgba(79,70,229,1) 100%)',
    height: '32',
    width: '132',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '4',
    borderBottomLeftRadius: '4',
    borderBottomRightRadius: '4',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: '✦ JUST IN',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(120deg, rgba(52,211,153,1) 0%, rgba(16,185,129,1) 50%, rgba(4,120,87,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '999',
    borderBottomLeftRadius: '4',
    borderBottomRightRadius: '999',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: 'NEW!',
    position: 'top-right',
    color: '#ffffff',
    background: 'rgba(248, 15, 74, 1)',
    height: '80',
    width: '80',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: false,
    paddingTop: 4,
    paddingRight: 0,
    paddingBottom: 4,
    paddingLeft: 0,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%)',
  },

  {
    text: '-{{discount_percentage}}',
    position: 'top-right',
    color: '#ffffff',
    background: 'rgba(32, 133, 92, 1)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 14,
    paddingBottom: 4,
    paddingLeft: 28,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '0',
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 0%, 100% 0%, 100% 100%, 30% 100%)',
  },

  {
    text: 'Save {{discount_value}}',
    position: 'top-right',
    color: '#ffffff',
    background: 'rgba(24, 119, 232, 1)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 14,
    paddingBottom: 4,
    paddingLeft: 20,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(100% 0%, 100% 100%, 0% 100%, 10% 50%, 0% 0%)',
  },

  {
    text: 'SPECIAL PRICE',
    position: 'top-right',
    color: '#ffffff',
    background: 'rgb(217, 18, 18)',
    height: '32',
    width: '148',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: false,
    paddingTop: 4,
    paddingRight: 18,
    paddingBottom: 4,
    paddingLeft: 18,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 10% 50%, 0% 0%)',
  },

  {
    text: 'NEW ARRIVAL',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(110deg, rgba(6,182,212,1) 0%, rgba(99,102,241,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 20,
    paddingBottom: 4,
    paddingLeft: 14,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%)',
  },

  {
    text: '🏆 BEST SELLER',
    position: 'top-right',
    color: 'rgba(120,53,15,1)',
    background:
      'radial-gradient(ellipse at 30% 50%, rgba(251,191,36,1) 0%, rgba(245,158,11,1) 50%, rgba(180,83,9,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 22,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%)',
  },

  {
    text: '🔥 HOT DEAL',
    position: 'top-right',
    color: 'rgba(154, 52, 18, 1)',
    background: 'rgba(255, 241, 230, 1)',
    height: '32',
    width: '116',
    opacity: 100,
    borderTopLeftRadius: '6',
    borderTopRightRadius: '6',
    borderBottomLeftRadius: '6',
    borderBottomRightRadius: '6',
    padding: false,
    paddingTop: 3,
    paddingRight: 16,
    paddingBottom: 3,
    paddingLeft: 16,
    fontSize: '14',
    fontWeight: '700',
    borderWidth: '2',
    borderColor: 'rgba(251, 146, 60, 1)',
    clipValue: null,
  },

  {
    text: '⭐ TOP RATED',
    position: 'top-right',
    color: 'rgba(122, 90, 0, 1)',
    background: 'rgba(255, 247, 204, 1)',
    height: '32',
    width: '116',
    opacity: 100,
    borderTopLeftRadius: '6',
    borderTopRightRadius: '6',
    borderBottomLeftRadius: '6',
    borderBottomRightRadius: '6',
    padding: false,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 16,
    fontSize: '14',
    fontWeight: '700',
    borderWidth: '2',
    borderColor: 'rgba(230, 184, 0, 1)',
    clipValue: null,
  },

  {
    text: '📈 TRENDING NOW',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(115deg, rgba(168,85,247,1) 0%, rgba(236,72,153,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 24,
    paddingBottom: 4,
    paddingLeft: 10,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%)',
  },

  {
    text: '⚡ FLASH SALE',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(105deg, rgba(239,68,68,1) 0%, rgba(220,38,38,1) 50%, rgba(153,27,27,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 14,
    paddingBottom: 4,
    paddingLeft: 18,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(8% 0%, 100% 0%, 100% 100%, 8% 100%, 0% 50%)',
  },

  {
    text: 'SAVE {{discount_value}}',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(110deg, rgba(16,185,129,1) 0%, rgba(5,150,105,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 22,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%)',
  },

  {
    text: 'ONLY {{stock_quantity}} LEFT',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(105deg, rgba(244,63,94,1) 0%, rgba(190,18,60,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 22,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%)',
  },

  {
    text: '🚨 LAST CHANCE',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(120deg, rgba(234,88,12,1) 0%, rgba(220,38,38,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 22,
    paddingBottom: 4,
    paddingLeft: 10,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%)',
  },

  {
    text: "✏️ EDITOR'S PICK",
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(135deg, rgba(34,211,238,1) 0%, rgba(59,130,246,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '4',
    borderTopRightRadius: '16',
    borderBottomLeftRadius: '16',
    borderBottomRightRadius: '4',
    padding: true,
    paddingTop: 4,
    paddingRight: 18,
    paddingBottom: 4,
    paddingLeft: 18,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: null,
  },

  {
    text: '🔖 STAFF PICK',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(120deg, rgba(99,102,241,1) 0%, rgba(79,70,229,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 20,
    paddingBottom: 4,
    paddingLeft: 14,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%)',
  },

  {
    text: '💎 PREMIUM',
    position: 'top-right',
    color: 'rgba(237,233,254,1)',
    background:
      'radial-gradient(ellipse at 40% 40%, rgba(167,139,250,1) 0%, rgba(109,40,217,1) 55%, rgba(46,16,101,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '999',
    borderTopRightRadius: '999',
    borderBottomLeftRadius: '999',
    borderBottomRightRadius: '999',
    padding: true,
    paddingTop: 4,
    paddingRight: 20,
    paddingBottom: 4,
    paddingLeft: 20,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '1.5',
    borderColor: 'rgba(196,181,253,0.5)',
    clipValue: null,
  },

  {
    text: '🏷️ Now {{sale_price}}',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(110deg, rgba(22,163,74,1) 0%, rgba(4,120,87,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 18,
    paddingBottom: 4,
    paddingLeft: 14,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%)',
  },

  {
    text: 'NOW {{sale_price}}',
    position: 'top-right',
    color: '#ffffff',
    background: 'linear-gradient(110deg, rgba(22,163,74,1) 0%, rgba(21,128,61,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 20,
    paddingBottom: 4,
    paddingLeft: 14,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%)',
  },

  {
    text: '✦ {{brand_name}}',
    position: 'top-right',
    color: 'rgba(255,255,255,1)',
    background: 'linear-gradient(115deg, rgba(15,23,42,1) 0%, rgba(30,58,138,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '999',
    borderTopRightRadius: '999',
    borderBottomLeftRadius: '999',
    borderBottomRightRadius: '999',
    padding: true,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 16,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '1.5',
    borderColor: 'rgba(59,130,246,0.5)',
    clipValue: null,
  },

  {
    text: '▸ {{category_name}}',
    position: 'top-right',
    color: 'rgba(255,255,255,1)',
    background: 'linear-gradient(115deg, rgba(15,23,42,1) 0%, rgba(79,70,229,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 18,
    paddingBottom: 4,
    paddingLeft: 14,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(0% 0%, 92% 0%, 100% 100%, 0% 100%)',
  },

  {
    text: '🏷️ {{tag_name}}',
    position: 'top-right',
    color: '#ffffff',
    background:
      'radial-gradient(ellipse at 30% 50%, rgba(232,121,249,1) 0%, rgba(168,85,247,1) 50%, rgba(88,28,135,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 22,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%)',
  },

  {
    text: '● LOW STOCK · {{stock_quantity}}',
    position: 'top-right',
    color: 'rgba(255,251,235,1)',
    background: 'linear-gradient(110deg, rgba(245,158,11,1) 0%, rgba(217,119,6,1) 100%)',
    height: '32',
    width: '104',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 22,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: 0,
    borderColor: '#ffffff',
    clipValue: 'polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%)',
  },

  {
    text: 'NEW',
    position: 'top-right',
    color: 'rgb(255, 253, 253)',
    background: 'rgb(224, 40, 80)',
    height: '32',
    width: '98',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 16,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '3',
    borderColor: 'rgba(255, 220, 50, 1)',
    clipValue: 'polygon(20% 0%, 95% 0%, 80% 100%, 5% 100%)',
  },
  {
    text: 'HOT',
    position: 'top-left',
    color: 'rgb(255, 253, 253)',
    background: 'rgb(239, 68, 68)',
    height: '32',
    width: '98',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 16,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '3',
    borderColor: 'rgba(255, 160, 50, 1)',
    clipValue: 'polygon(20% 0%, 95% 0%, 80% 100%, 5% 100%)',
  },
  {
    text: 'LIMITED',
    position: 'top-right',
    color: 'rgb(255, 253, 253)',
    background: 'rgb(30, 30, 30)',
    height: '32',
    width: '110',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 20,
    paddingBottom: 4,
    paddingLeft: 20,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '3',
    borderColor: 'rgba(120, 120, 120, 1)',
    clipValue: 'polygon(16% 0%, 95% 0%, 84% 100%, 5% 100%)',
  },
  {
    text: 'LUXURY',
    position: 'top-left',
    color: 'rgb(255, 253, 253)',
    background: 'rgb(138, 43, 226)',
    height: '32',
    width: '106',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 20,
    paddingBottom: 4,
    paddingLeft: 20,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '3',
    borderColor: 'rgba(255, 130, 250, 1)',
    clipValue: 'polygon(16% 0%, 95% 0%, 84% 100%, 5% 100%)',
  },

  {
    text: '-{{discount_value}}',
    position: 'top-right',
    color: 'rgb(220, 38, 38)',
    background: 'rgb(255, 255, 255)',
    height: '32',
    width: '80',
    opacity: 100,
    borderTopLeftRadius: '0',
    borderTopRightRadius: '0',
    borderBottomLeftRadius: '0',
    borderBottomRightRadius: '0',
    padding: true,
    paddingTop: 4,
    paddingRight: 16,
    paddingBottom: 4,
    paddingLeft: 16,
    fontSize: '14',
    fontWeight: '600',
    borderWidth: '3',
    borderColor: 'rgba(220, 38, 38, 1)',
    clipValue: 'polygon(20% 0%, 95% 0%, 80% 100%, 5% 100%)',
  },
];
