// components/waiting-dots.tsx
'use client'

import { memo, useEffect, useState } from "react";

function RealWaitingDots({ text, className = "" }: { text: string, className?: string }) {
  const [dots, setDots] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setDots(prev => (prev + 1) % 4);
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return (
    <p className={`text-neutral-100 ${className}`}>
      {text}{".".repeat(dots)}
    </p>
  );
}

RealWaitingDots.displayName = "WaitingDots"

const WaitingDots = RealWaitingDots;
export default memo(WaitingDots);