'use client'

import { useEffect, useRef, useState } from 'react'
import { AnimatePresence, motion } from 'motion/react'
import Image from 'next/image'

const featuredPerson = {
  name: 'Sample Artist',
  role: 'DJ / Producer',
  location: 'Berlin, Germany',
  images: ['/images/sample/1.jpg', '/images/sample/2.jpg'],
  videos: ['/videos/sample/video_1.mp4', '/videos/sample/video_2.mp4'],
}

export default function FeaturedCard() {
  const [i, setI] = useState(0)
  const [isVideo, setIsVideo] = useState(true)
  const [loaded, setLoaded] = useState(false)
  const videoRef = useRef<HTMLVideoElement>(null)

  const media = [
    ...featuredPerson.videos.map((v) => ({ type: 'video' as const, src: v })),
    ...featuredPerson.images.map((i) => ({ type: 'image' as const, src: i })),
  ]

  useEffect(() => {
    const next = (i + 1) % media.length
    if (media[next].type === 'image') new window.Image().src = media[next].src
  }, [i, media])

  const item = media[i]
  const { name } = featuredPerson

  return (
    <div>
      <AnimatePresence mode='wait'>
        <motion.div
          key={i}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.4 }}
          className='absolute inset-0'
        >
          {isVideo ? (
            <video
              ref={videoRef}
              src={item.src}
              autoPlay
              loop
              muted
              playsInline
              className='h-full w-full object-cover object-center'
              onLoadedData={() => setLoaded(true)}
            />
          ) : (
            <Image
              src={item.src}
              alt={`${name} - ${i}`}
              fill
              className='object-cover object-top'
              priority={!i}
              onLoad={() => setLoaded(true)}
            />
          )}
        </motion.div>
      </AnimatePresence>
    </div>
  )
}