sass-mohfarawati/components/site/launch-countdown.tsx

"use client";

import { useEffect, useState } from "react";

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

type CountdownLabels = {
  days: string;
  hours: string;
  minutes: string;
  seconds: string;
};

type LaunchCountdownProps = {
  /** Target launch date as an ISO string. */
  targetIso: string;
  labels: CountdownLabels;
  /** Shown once the target date has passed. */
  launchedLabel: string;
  /** Arabic script: drop uppercase/letter-spacing on labels. */
  arabic?: boolean;
  className?: string;
};

type Remaining = {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
  done: boolean;
};

function computeRemaining(target: number): Remaining {
  const diff = target - Date.now();

  if (diff <= 0) {
    return { days: 0, hours: 0, minutes: 0, seconds: 0, done: true };
  }

  const totalSeconds = Math.floor(diff / 1000);

  return {
    days: Math.floor(totalSeconds / 86400),
    hours: Math.floor((totalSeconds % 86400) / 3600),
    minutes: Math.floor((totalSeconds % 3600) / 60),
    seconds: totalSeconds % 60,
    done: false,
  };
}

function pad(value: number): string {
  return value.toString().padStart(2, "0");
}

export function LaunchCountdown({
  targetIso,
  labels,
  launchedLabel,
  arabic = false,
  className,
}: LaunchCountdownProps) {
  // Start null so the server and first client render match (no hydration
  // mismatch); the real value is filled in on mount and every second after.
  const [remaining, setRemaining] = useState<Remaining | null>(null);

  useEffect(() => {
    const target = new Date(targetIso).getTime();

    if (Number.isNaN(target)) {
      return;
    }

    setRemaining(computeRemaining(target));

    const interval = window.setInterval(() => {
      setRemaining(computeRemaining(target));
    }, 1000);

    return () => window.clearInterval(interval);
  }, [targetIso]);

  if (remaining?.done) {
    return (
      <p
        className={cn(
          "text-sm font-medium tracking-[0.02em] text-[hsl(var(--hero-ink))]",
          className,
        )}
      >
        {launchedLabel}
      </p>
    );
  }

  const units = [
    { key: "days", label: labels.days, value: remaining?.days },
    { key: "hours", label: labels.hours, value: remaining?.hours },
    { key: "minutes", label: labels.minutes, value: remaining?.minutes },
    { key: "seconds", label: labels.seconds, value: remaining?.seconds },
  ];

  return (
    <div
      className={cn("flex items-start justify-center gap-2.5 sm:gap-3.5", className)}
      role="timer"
      aria-live="off"
    >
      {units.map((unit) => (
        <div key={unit.key} className="flex flex-col items-center gap-2.5">
          <div className="group relative flex h-[4.5rem] w-[4.5rem] items-center justify-center overflow-hidden rounded-[calc(var(--radius-nested)+2px)] border border-foreground/10 bg-background/55 shadow-[var(--shadow-sm)] backdrop-blur-[18px] dark:border-foreground/12 dark:bg-background/20 sm:h-24 sm:w-24">
            <span
              aria-hidden
              className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-foreground/25 to-transparent"
            />
            <span className="text-3xl font-semibold tabular-nums text-[hsl(var(--hero-ink))] sm:text-[2.6rem]">
              {unit.value === undefined ? "--" : pad(unit.value)}
            </span>
          </div>
          <span
            className={cn(
              "text-[0.68rem] font-medium text-foreground/55 sm:text-xs",
              arabic ? "tracking-normal" : "uppercase tracking-[0.16em]",
            )}
          >
            {unit.label}
          </span>
        </div>
      ))}
    </div>
  );
}