'use client'

import Image from 'next/image'
import styles from './TransformLoader.module.css'

interface TransformLoaderProps {
  image: string
}

export default function TransformLoader({ image }: TransformLoaderProps) {
  return (
    <div className={styles.container}>
      {/* Original Image */}
      <div className={styles.imageContainer}>
        <Image
          src={image}
          alt="Transforming"
          fill
          className={styles.image}
          unoptimized
        />

        {/* Aura Overlay */}
        <div className={styles.auraOverlay}>
          <div className={styles.auraRing}></div>
          <div className={styles.auraRing}></div>
          <div className={styles.auraRing}></div>
        </div>

        {/* Scan Line */}
        <div className={styles.scanLine}></div>

        {/* Particles */}
        <div className={styles.particles}>
          {[...Array(20)].map((_, i) => (
            <div key={i} className={styles.particle} style={{
              left: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 2}s`,
              animationDuration: `${2 + Math.random() * 2}s`
            }} />
          ))}
        </div>

        {/* Glitch Effect */}
        <div className={styles.glitch}></div>
      </div>

      {/* Loading Text */}
      <div className={styles.status}>
        <div className={styles.statusText}>
          <span className={styles.statusDot}></span>
          Entering PRIME
        </div>
        <div className={styles.statusSub}>Transformation in progress...</div>
      </div>
    </div>
  )
}