Image Trail

'use client'

import { useRef } from "react"
import { ImageTrail } from "@/components/ui/image-trail"

const ImageTrailDemo = () => {
  const ref = useRef<HTMLDivElement>(null)

  // Unsplash images that definitely exist
 const images = [
    "https://cdn.21st.dev/assets/mirror/fd/fd76567bae065063f0aef003423a2455325e8f594175af78e9d205fcd9fdf2b1.jpg",
    "https://cdn.21st.dev/assets/mirror/d0/d069396ffe22f2757574c2ff4aa26195816e2e449c0310cdf3cd8ce6aa2721d8.jpg",
    "https://cdn.21st.dev/assets/mirror/e8/e8ce88e108a912ec29fd8cc0fe2013444c79505a830568527fa6acdf751c1d4f.jpg",
    "https://cdn.21st.dev/assets/mirror/9e/9e454e2b4b962251911d18e77e723e54424ee4bd6026319577a898fc04688c71.jpg",
    "https://cdn.21st.dev/assets/mirror/43/435bab41d096fac50dbd2d0f657345dce1a6b5d092b407db552a1ee0b83b5823.jpg",
    "https://cdn.21st.dev/assets/mirror/d0/d006ecb1feea2948164d66c1245291b11d20fc68ff5845c55237c65b950700f2.jpg",
  ].map(url => `${url}?auto=format&fit=crop&w=300&q=80`)

  return (
    <div className="flex w-full h-screen justify-center items-center bg-white relative overflow-hidden">
      <div className="absolute top-0 left-0 z-0" ref={ref}>
        <ImageTrail containerRef={ref}>
          {images.map((url, index) => (
            <div
              key={index}
              className="flex relative overflow-hidden w-24 h-24 rounded-lg"
            >
              <img
                src={url}
                alt={`Trail image ${index + 1}`}
                className="object-cover absolute inset-0 hover:scale-110 transition-transform"
              />
            </div>
          ))}
        </ImageTrail>
      </div>
      <h1 className="text-7xl md:text-9xl font-bold z-10 select-none bg-clip-text text-transparent bg-gradient-to-r from-neutral-950 to-neutral-500">
        ALBUMS
      </h1>
    </div>
  )
}

export { ImageTrailDemo }