'use client';
import Wrapper from '@/components/common/Wrapper';
import { TechIcons } from '@/components/icons/TechIcons';
import { useMemo } from 'react';
import { TechnologiesProps } from '@/src/types/technology';

export function TechnologiesInfiniteLoop({
  technologies = [],
  icons = TechIcons,
  styling = {},
  sectionId,
  className,
}: TechnologiesProps & { icons?: Record<string, React.ReactNode>; className?: string }) {
  const techList = useMemo(() => {
    if (technologies.length === 0) return [];

    if (technologies.length < 12) {
      return Array(Math.ceil(12 / technologies.length))
        .fill(technologies)
        .flat();
    }
    return technologies;
  }, [technologies]);

  const techLength = techList.length;
  const duration = (techLength / 1.2).toFixed(2);
  const backgroundColor = styling?.backgroundColor ?? 'var(--color-background)';

  return (
    <Wrapper id={sectionId} styling={styling} className={className}>
      <div className='flex flex-row' style={{ alignItems: styling?.align }}>
        <div className='logos' style={{ '--background': backgroundColor } as React.CSSProperties}>
          <div className='logos-track'>
            <div className='logos-slide primary' style={{ animation: `slide ${duration}s infinite linear` }}>
              {techList.map((tech) => (
                <div key={crypto.randomUUID()} className='flex items-center justify-center'>
                  {icons[tech]}
                </div>
              ))}
            </div>
            <div className='logos-slide secondary' style={{ animation: `slide ${duration}s infinite linear` }}>
              {techList.map((tech) => (
                <div key={crypto.randomUUID()} className='flex items-center justify-center'>
                  {icons[tech]}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Wrapper>
  );
}
