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

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

  useEffect(() => {
    if (reduced || !ref.current) return;
    const flags = ref.current.querySelectorAll('.flag');
    gsap.to(flags, {
      y: '-=8',
      duration: 1.5,
      ease: 'sine.inOut',
      yoyo: true,
      repeat: -1,
      stagger: 0.15,
    });
  }, [reduced]);

  if (reduced) return null;

  const colors = ['#E58A1F', '#B9412C', '#4F5D50', '#8DB7C7', '#263238'];
  return (
    <div ref={ref} className="flex gap-1" aria-hidden="true">
      {Array.from({ length: 12 }).map((_, i) => (
        <div
          key={i}
          className="flag w-4 h-6 rounded-sm"
          style={{ backgroundColor: colors[i % colors.length] }}
        />
      ))}
    </div>
  );
};

export default PrayerFlagRibbon;