<mmq-embed short-code="KP43OX" template="Basket"></mmq-embed>

<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" rel="script" type="application/javascript" async></script>

document.addEventListener('mimeeq-app-loaded', () => {
  // Define a function to create SVG icons with specific colors
  function createSvgIcon(path, color = 'currentColor', viewBox = '0 0 24 24') {
    return `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="${viewBox}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
  }
  
  window.mimeeqApp.config.icons = {
    // Primary toolbar icons - most commonly accessed
    quickIcons: {
      // Zoom controls
      zoomAll: createSvgIcon('<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line>', '#0066cc'),
      
      // Fullscreen controls
      enterFullscreen: createSvgIcon('<polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line>', '#0066cc'),
      leaveFullscreen: createSvgIcon('<polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line>', '#0066cc'),
      
      // History controls
      reset: createSvgIcon('<path d="M3 2v6h6"></path><path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path><path d="M21 22v-6h-6"></path><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path>', '#0066cc'),
      undo: createSvgIcon('<polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path>', '#0066cc'),
      redo: createSvgIcon('<polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path>', '#0066cc'),
      
      // Export functions
      pdfSquare: createSvgIcon('<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M9 15v-2h6v2"></path><path d="M9 18v-2h6v2"></path><path d="M9 12v-2h2v2"></path>', '#0066cc'),
      imageSquare: createSvgIcon('<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline>', '#0066cc'),
      exportModel: createSvgIcon('<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line>', '#0066cc'),
      
      // AR experience
      ar: createSvgIcon('<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line>', '#9933cc'),
    },
    
    // Navigation and zoom controls - neutral styling
    misc: {
      caretDown: createSvgIcon('<polyline points="6 9 12 15 18 9"></polyline>', '#555555'),
      plus: createSvgIcon('<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line>', '#555555'),
    },
    optionPanel: {
      minus: createSvgIcon('<circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line>', '#555555'),
    },
    
    // E-commerce icon with cart styling
    basket: {
      cart: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none">
        <circle cx="9" cy="21" r="1" fill="#0066cc" stroke="#0066cc"></circle>
        <circle cx="20" cy="21" r="1" fill="#0066cc" stroke="#0066cc"></circle>
        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" stroke="#0066cc" stroke-width="2"></path>
      </svg>`,
    }
  };
});