export default function createWidgetHtml(theme, state) {
  const isBorderEnabled = theme.border.enabled;
  const borderStyle = isBorderEnabled
    ? `border: 1px solid ${theme.border.color};`
    : "";
  const stateText = state.text.replace(
    /<span([^>]*)>/g,
    `<span$1 style="color: ${theme.accentColor}; font-weight: 700;">`
  );

  return `
    <div class="firevert-spectator-views ${
      theme.shadow ? "firevert-spectator-views--box-shadow" : ""
    }" style="${borderStyle} border-radius: ${
    theme.borderRadius
  }px !important;">
     <div class="firevert-spectator-views__container" style="border-radius: ${
       theme.borderRadius
     }px !important;">
        <div class="firevert-spectator-views__item" style="background-color: ${
          theme.backgroundColor
        }; border-radius: ${theme.borderRadius}px !important;">
            <div class="firevert-spectator-views__icon">
              <svg id="ico_oko" data-name="ico oko" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path id="Path_1692" data-name="Path 1692" d="M0,0H24V24H0Z" fill="none"/>
                <path id="Path_1693" data-name="Path 1693" d="M10,12a2,2,0,1,0,2-2,2,2,0,0,0-2,2" fill="none" stroke="${
                  theme.accentColor || "#000"
                }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                <path id="Path_1694" data-name="Path 1694" d="M21,12q-3.6,6-9,6T3,12q3.6-6,9-6t9,6" fill="none" stroke="${
                  theme.accentColor || "#000"
                }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
              </svg>
            </div>
            <p class="firevert-spectator-views__text" style="color: ${
              theme.textColor
            };">${stateText}</p>
        </div>
      </div>
    </div>
    `;
}
