'use client';
import Image from 'next/image';
import { motion } from 'framer-motion';
import styles from '../styles/Box.module.css';

type Slide = { src: string; alt: string };

export default function Slider() {
  const slides: Slide[] = [
    { src: '/images/logos/airads.svg', alt: 'AIRADS College' },
    { src: '/images/logos/aitec.svg', alt: 'AITEC College' },
    { src: '/images/logos/hosting.svg', alt: 'Web Hosting' },
    { src: '/images/logos/seo.svg', alt: 'Search Engine Optimization' },
    { src: '/images/logos/writing.svg', alt: 'Technical Writing' },
    { src: '/images/logos/branding.svg', alt: 'Branding' },
  ];

  return (
    <div className={styles['animation']}>
      <motion.div
        initial={{ x: '40%' }}
        animate={{ x: '-50%' }}
        transition={{ duration: 25, repeat: Infinity, ease: 'linear' }}
        className="flex space-x-4 w-max"
      >
        {slides.map((slide, index) => (
          <div key={index} className={styles['slider-item']}>
            <Image
              src={slide.src}
              alt={slide.alt}
              width={180}
              height={80}
              priority={index < 2} // small perf boost for first items
            />
          </div>
        ))}
      </motion.div>
    </div>
  );
}