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

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

  useEffect(() => {
    if (reduced || !ref.current) return;
    const rings = ref.current.querySelectorAll('.ring');
    gsap.to(rings, {
      rotation: 360,
      duration: 4,
      repeat: -1,
      ease: 'none',
      stagger: 0.2,
    });
  }, [reduced]);

  if (reduced) {
    return (
      <div className="flex items-center justify-center w-32 h-32">
        <div className="w-12 h-12 bg-[var(--brand-500)] rounded-full opacity-50" />
      </div>
    );
  }

  return (
    <div ref={ref} className="relative w-32 h-32 flex items-center justify-center" aria-hidden="true">
      <div className="ring absolute inset-0 border-2 border-[var(--brand-500)] rounded-full opacity-30" />
      <div className="ring absolute inset-2 border-2 border-[var(--brand-400)] rounded-full opacity-50" />
      <div className="ring absolute inset-4 border-2 border-[var(--brand-300)] rounded-full opacity-70" />
      <div className="w-4 h-4 bg-[var(--brand-500)] rounded-full" />
    </div>
  );
};

export default BootCore;