import { useEffect, useState } from "react";

const TARGET = new Date("2027-06-23T09:00:00-03:00").getTime();

function diff() {
  const t = Math.max(0, TARGET - Date.now());
  return {
    dias: Math.floor(t / 86400000),
    horas: Math.floor((t / 3600000) % 24),
    min: Math.floor((t / 60000) % 60),
    seg: Math.floor((t / 1000) % 60),
  };
}

export function Countdown() {
  const [time, setTime] = useState<ReturnType<typeof diff> | null>(null);

  useEffect(() => {
    setTime(diff());
    const id = setInterval(() => setTime(diff()), 1000);
    return () => clearInterval(id);
  }, []);

  const items = [
    { label: "dias", value: time?.dias },
    { label: "horas", value: time?.horas },
    { label: "min", value: time?.min },
    { label: "seg", value: time?.seg },
  ];

  return (
    <div className="flex gap-3 sm:gap-4">
      {items.map((i) => (
        <div
          key={i.label}
          className="min-w-[68px] rounded-xl border border-border bg-surface/70 px-3 py-3 text-center backdrop-blur sm:min-w-[84px]"
        >
          <div className="font-display text-2xl font-bold tabular-nums sm:text-3xl">
            {i.value === undefined ? "--" : String(i.value).padStart(2, "0")}
          </div>
          <div className="mt-1 text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
            {i.label}
          </div>
        </div>
      ))}
    </div>
  );
}