import React, { useRef, useEffect } from 'react';
import { gsap } from '../../lib/gsap.ts';
import { useReducedMotion } from '../../hooks/useReducedMotion.ts';

const items = [
  'BOOTSTRAP OK', 'ROUTER OK', 'FALLBACK READY',
  'ERROR BOUNDARY ARMED', 'DATA VALIDATED', 'MOTION SAFE',
];

const Marquee: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null);
  const reduced = useReducedMotion();

  useEffect(() => {
    if (reduced || !ref.current) return;
    gsap.to(ref.current, {
      xPercent: -50,
      duration: 20,
      ease: 'none',
      repeat: -1,
    });
  }, [reduced]);

  return (
    <div className="overflow-hidden py-4 bg-[var(--surface-2)]">
      <div ref={ref} className="flex gap-8 whitespace-nowrap">
        {[...items, ...items].map((item, i) => (
          <span key={i} className="text-sm font-mono text-[var(--ink-muted)]">
            {item}
          </span>
        ))}
      </div>
    </div>
  );
};

export default Marquee;