"use client";
import * as React from 'react';
import { useMemo, useState, useEffect } from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

// components/blocks/banner/banner-delivery-countdown.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var svgCache = /* @__PURE__ */ new Map();
function DynamicIcon({
  name,
  size = 28,
  color,
  className,
  alt
}) {
  const [svgContent, setSvgContent] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const { url, iconName } = React.useMemo(() => {
    const separator = name.includes("/") ? "/" : ":";
    const [prefix, iconName2] = name.split(separator);
    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
    return {
      url: baseUrl,
      iconName: iconName2
    };
  }, [name, size]);
  React.useEffect(() => {
    let isMounted = true;
    const fetchSvg = async () => {
      const cached = svgCache.get(url);
      if (cached) {
        if (isMounted) {
          setSvgContent(cached);
          setIsLoading(false);
        }
        return;
      }
      try {
        setIsLoading(true);
        setError(null);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Failed to fetch icon: ${response.status}`);
        }
        let svg = await response.text();
        svg = processSvgForCurrentColor(svg);
        svgCache.set(url, svg);
        if (isMounted) {
          setSvgContent(svg);
          setIsLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError(err instanceof Error ? err.message : "Failed to load icon");
          setIsLoading(false);
        }
      }
    };
    fetchSvg();
    return () => {
      isMounted = false;
    };
  }, [url]);
  if (isLoading) {
    return /* @__PURE__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        "aria-hidden": "true"
      }
    );
  }
  if (error || !svgContent) {
    return /* @__PURE__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        role: "img",
        "aria-label": alt || iconName
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: cn("inline-flex items-center justify-center", className),
      style: {
        width: size,
        height: size,
        color: color || "inherit"
      },
      role: "img",
      "aria-label": alt || iconName,
      dangerouslySetInnerHTML: { __html: svgContent }
    }
  );
}
function processSvgForCurrentColor(svg) {
  let processed = svg;
  processed = processed.replace(
    /stroke=["'](#000000|#000|black)["']/gi,
    'stroke="currentColor"'
  );
  processed = processed.replace(
    /fill=["'](#000000|#000|black)["']/gi,
    'fill="currentColor"'
  );
  return processed;
}
function BannerDeliveryCountdown({
  icon,
  iconName = "lucide/gift",
  deliveryDate = "Dec 24",
  cutoffTime,
  prefixText = "Order within",
  middleText = "for delivery by",
  timerSlot,
  renderTimer,
  className,
  containerClassName,
  contentClassName,
  iconClassName,
  messageClassName,
  timerClassName,
  deliveryDateClassName
}) {
  const defaultCutoffTime = useMemo(
    () => new Date(Date.now() + 4 * 60 * 60 * 1e3),
    []
  );
  const targetTime = cutoffTime ?? defaultCutoffTime;
  const [timeLeft, setTimeLeft] = useState({
    hours: 0,
    minutes: 0,
    seconds: 0
  });
  useEffect(() => {
    const calculateTimeLeft = () => {
      const now = (/* @__PURE__ */ new Date()).getTime();
      const target = targetTime.getTime();
      const diff = target - now;
      if (diff <= 0) {
        return { hours: 0, minutes: 0, seconds: 0 };
      }
      return {
        hours: Math.floor(diff / (1e3 * 60 * 60)),
        minutes: Math.floor(diff % (1e3 * 60 * 60) / (1e3 * 60)),
        seconds: Math.floor(diff % (1e3 * 60) / 1e3)
      };
    };
    setTimeLeft(calculateTimeLeft());
    const timer = setInterval(() => {
      setTimeLeft(calculateTimeLeft());
    }, 1e3);
    return () => clearInterval(timer);
  }, [targetTime]);
  const pad = (n) => n.toString().padStart(2, "0");
  const renderIcon = () => {
    if (icon) return icon;
    return /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, size: 16, className: iconClassName });
  };
  const renderDefaultTimer = () => {
    if (timerSlot) return timerSlot;
    if (renderTimer) return renderTimer(timeLeft);
    return /* @__PURE__ */ jsxs("span", { className: cn("font-mono font-bold", timerClassName), children: [
      pad(timeLeft.hours),
      ":",
      pad(timeLeft.minutes),
      ":",
      pad(timeLeft.seconds)
    ] });
  };
  return /* @__PURE__ */ jsx("div", { className: cn("w-full bg-amber-500 text-amber-950", className), children: /* @__PURE__ */ jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-3 text-sm", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", messageClassName), children: [
    renderIcon(),
    /* @__PURE__ */ jsxs("span", { children: [
      prefixText,
      " ",
      renderDefaultTimer(),
      " ",
      middleText,
      " ",
      deliveryDate && (typeof deliveryDate === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-semibold", deliveryDateClassName), children: deliveryDate }) : /* @__PURE__ */ jsx("span", { className: deliveryDateClassName, children: deliveryDate }))
    ] })
  ] }) }) }) });
}

export { BannerDeliveryCountdown };
//# sourceMappingURL=banner-delivery-countdown.js.map
//# sourceMappingURL=banner-delivery-countdown.js.map