"use client";

import { useEffect, useState } from "react";

export function EditorialProgress() {
  const [pct, setPct] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setPct((v) => (v >= 100 ? 0 : v + 1));
    }, 60);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center min-h-[220px]">
      <div className="w-full max-w-sm">
        <div className="flex items-baseline justify-between mb-3">
          <span
            className="text-[#111111] tracking-[-0.01em]"
            style={{
              fontFamily: "'Instrument Serif', Georgia, serif",
              fontSize: 28,
            }}
          >
            {String(pct).padStart(2, "0")}
            <span className="text-[#6B6B66] text-[14px] ml-1">/100</span>
          </span>
          <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-[#6B6B66]">
            Generating
          </span>
        </div>
        <div className="h-[2px] bg-[#1111111A] relative overflow-hidden">
          <div
            className="absolute left-0 top-0 h-full bg-[#2A3D2F] transition-[width] duration-100"
            style={{ width: `${pct}%` }}
          />
        </div>
        <div className="flex justify-between mt-3 font-mono text-[10px] uppercase tracking-[0.12em] text-[#6B6B66]">
          <span>Tokens · 2,847</span>
          <span>~ {Math.max(0, 100 - pct)}s remaining</span>
        </div>
      </div>
    </div>
  );
}
Editorial Progress Bar
