/**
 * Layout Exporter Types
 */

import type { CanvasElement, PriceElement, CurrencyElement, DiscountBadgeElement, TextElement, VariablePriceRangeElement } from "@/types";

/**
 * Export result containing generated HTML and CSS
 */
export interface ExportResult {
  html: string;
  css: string;
  webComponentHtml: string;
  customJs?: string;
  /** Whether this layout uses CountUp animation (requires countUp.min.js) */
  usesCountUp?: boolean;
}

/**
 * CSS media query breakpoints
 */
export const BREAKPOINTS = {
  tablet: 768, // max-width for tablet
  mobile: 480, // max-width for mobile
} as const;

export type Breakpoint = "tablet" | "mobile";

// Type guards for element types
export const isPriceElement = (el: CanvasElement): el is PriceElement => el.type === "regularPrice" || el.type === "salePrice";

export const isVariablePriceRangeElement = (el: CanvasElement): el is VariablePriceRangeElement => el.type === "variablePriceRange";

export const isCurrencyElement = (el: CanvasElement): el is CurrencyElement => el.type === "currencySymbol";

export const isDiscountBadgeElement = (el: CanvasElement): el is DiscountBadgeElement => el.type === "discountBadge";

export const isTextElement = (el: CanvasElement): el is TextElement => el.type === "text";
