reui-blocks/blocks/promo-banner3.tsx

"use client";

import { Gift } from "lucide-react";
import { useEffect, useMemo, useState } from "react";

import { cn } from "@/lib/utils";

interface PromoBanner3Props {
  deliveryDate?: string;
  cutoffTime?: Date;
  className?: string;
}

const formatCountdownPart = (value: number) =>
  value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 });

const PromoBanner3 = ({
  deliveryDate = "۲۴ دی",
  cutoffTime,
  className,
}: PromoBanner3Props) => {
  const defaultCutoffTime = useMemo(
    () => new Date(Date.now() + 4 * 60 * 60 * 1000),
    [],
  );
  const targetTime = cutoffTime ?? defaultCutoffTime;

  const [timeLeft, setTimeLeft] = useState({
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  useEffect(() => {
    const calculateTimeLeft = () => {
      const now = 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 / (1000 * 60 * 60)),
        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
        seconds: Math.floor((diff % (1000 * 60)) / 1000),
      };
    };

    setTimeLeft(calculateTimeLeft());
    const timer = setInterval(() => {
      setTimeLeft(calculateTimeLeft());
    }, 1000);

    return () => clearInterval(timer);
  }, [targetTime]);

  const countdown = [
    formatCountdownPart(timeLeft.hours),
    formatCountdownPart(timeLeft.minutes),
    formatCountdownPart(timeLeft.seconds),
  ].join(":");

  return (
    <div
      dir="rtl"
      lang="fa"
      className={cn("w-full bg-primary text-primary-foreground", className)}
    >
      <div className="container py-2.5">
        <div className="flex flex-wrap items-center justify-center gap-3 text-sm">
          <div className="flex items-center gap-2">
            <Gift className="size-4 shrink-0" />
            <span>
              تا{" "}
              <span
                dir="rtl"
                className="inline-block font-mono font-bold tabular-nums"
              >
                {countdown}
              </span>{" "}
              دیگر تمدید کنید - فعال‌سازی تا{" "}
              <span className="font-semibold">{deliveryDate}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export { PromoBanner3 };