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

// components/blocks/banner/banner-countdown-sale.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function BannerCountdownSale({
  endTime,
  message,
  description,
  timerSlot,
  renderTimer,
  className,
  containerClassName,
  contentClassName,
  messageClassName,
  descriptionClassName,
  timerClassName,
  timeUnitClassName,
  separatorClassName
}) {
  const targetTime = endTime;
  const [timeLeft, setTimeLeft] = useState({
    hours: 0,
    minutes: 0,
    seconds: 0
  });
  useEffect(() => {
    if (!targetTime) {
      return;
    }
    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 = useCallback((n) => n.toString().padStart(2, "0"), []);
  const timerContent = useMemo(() => {
    if (timerSlot) return timerSlot;
    if (renderTimer) return renderTimer(timeLeft);
    if (!targetTime) return null;
    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 font-mono text-lg font-bold", timerClassName), children: [
      /* @__PURE__ */ jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.hours) }),
      /* @__PURE__ */ jsx("span", { className: separatorClassName, children: ":" }),
      /* @__PURE__ */ jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.minutes) }),
      /* @__PURE__ */ jsx("span", { className: separatorClassName, children: ":" }),
      /* @__PURE__ */ jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.seconds) })
    ] });
  }, [timerSlot, renderTimer, timeLeft, timerClassName, timeUnitClassName, separatorClassName, pad, targetTime]);
  const messageContent = useMemo(() => {
    if (!message) return null;
    return typeof message === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsx("div", { className: messageClassName, children: message });
  }, [message, messageClassName]);
  const descriptionContent = useMemo(() => {
    if (!description) return null;
    return typeof description === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description });
  }, [description, descriptionClassName]);
  return /* @__PURE__ */ jsx("div", { className: cn("w-full bg-destructive text-white", className), children: /* @__PURE__ */ jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-sm", contentClassName), children: [
    messageContent,
    timerContent,
    descriptionContent
  ] }) }) });
}

export { BannerCountdownSale };
