import { fetchLiveCampaignProducts } from "ondc-campaign-sdk";

const data = await fetchLiveCampaignProducts();
console.log(data);

import { renderDynamicTemplate } from "ondc-campaign-sdk";

async function loadCampaignTemplate() {
  const container = document.getElementById("campaign-section");
  if (container) {
    // Render campaign with order 1 (first campaign) and show 12 products
    const html = await renderDynamicTemplate(1, 12);
    container.innerHTML = html;
  } else {
    console.warn("Container #campaign-section not found.");
  }
}

// Call the function
loadCampaignTemplate();

// @ts-ignore
import { fetchLiveCampaignProductsWithHtml } from "ondc-campaign-sdk";

async function loadLiveCampaignProducts() {
  const container = document.getElementById("campaign-section");
  if (container) {
    const html = await fetchLiveCampaignProductsWithHtml(5); // show 5 products
    container.innerHTML = html;
  } else {
    console.warn("Container #campaign-section not found.");
  }
}

// Call the function
loadLiveCampaignProducts();

const styles = {
  primary: "#0d9488",
  accent: "#ef4444",
  bgLight: "#f0fdfa",
  borderRadius: "16px",
};

const html = await fetchLiveCampaignProductsWithHtml(6, styles);

import { renderCampaignsByCount } from "ondc-campaign-sdk";

async function loadCampaignsCarousel() {
  const container = document.getElementById("campaigns-carousel");
  if (container) {
    // Render carousel with 5 campaigns
    const html = await renderCampaignsByCount('5');
    container.innerHTML = html;
  } else {
    console.warn("Container #campaigns-carousel not found.");
  }
}

// Call the function
loadCampaignsCarousel();

interface CampaignStyle {
  titleFontSize?: 'small' | 'medium' | 'large' | 'xl';          // Title font size
  titleColor?: string;                                           // Title color (hex/css color)
  titleFontWeight?: 'normal' | 'bold' | 'bolder';              // Title font weight
  descriptionFontSize?: 'small' | 'medium' | 'large';          // Description font size
  descriptionColor?: string;                                     // Description color
  bannerTemplate?: 'classic' | 'split' | 'overlay' | 'modern'; // Template type
  overlayOpacity?: number;                                       // Overlay opacity (0.0 to 1.0)
  showButton?: boolean;                                          // Show/hide CTA button
  buttonText?: string;                                           // Custom button text
  buttonBgColor?: string;                                        // Button background color
  buttonTextColor?: string;                                      // Button text color
  buttonBorderRadius?: number;                                   // Button border radius (pixels)
  buttonFontSize?: 'small' | 'medium' | 'large';               // Button font size
  buttonFontWeight?: 'normal' | 'semibold' | 'bold';           // Button font weight
}

// Classic template with custom styling
const classicCampaign = {
  campaign_style: {
    bannerTemplate: "classic",
    titleFontSize: "xl",
    titleColor: "#ffffff",
    buttonBgColor: "#3b82f6",
    buttonText: "Explore Collection"
  }
};

// Split template for featured products
const splitCampaign = {
  campaign_style: {
    bannerTemplate: "split",
    titleFontSize: "large",
    overlayOpacity: 0.4,
    buttonBgColor: "#ef4444",
    buttonText: "Shop Category"
  }
};

// Modern template with dark text
const modernCampaign = {
  campaign_style: {
    bannerTemplate: "modern",
    titleColor: "#1f2937",
    descriptionColor: "#4b5563",
    buttonBgColor: "#8b5cf6",
    showButton: true
  }
};

{
  primary: "#3d5af1",
  primaryDark: "#2a3eb1",
  accent: "#ff6b6b",
  text: "#333333",
  textLight: "#777777",
  bgLight: "#f8f9fa",
  white: "#ffffff",
  shadow: "0 10px 30px rgba(0,0,0,0.08)",
  borderRadius: "12px"
}