'use client';

import { motion, useReducedMotion } from 'framer-motion';
import { ReactNode } from 'react';

interface MockupStackProps {
  children: ReactNode;
  index?: number;
}

export default function MockupStack({ children, index = 0 }: MockupStackProps) {
  const shouldReduceMotion = useReducedMotion();

  const seed = index * 1337;
  const rotation1 = ((seed * 17) % 80 - 40) / 20;
  const rotation2 = ((seed * 23) % 80 - 40) / 20;

  return (
    <div className="relative w-full h-full" style={{ perspective: '1200px' }}>
      <motion.div
        className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
        style={{
          rotate: rotation1,
          zIndex: 1,
          top: '-8px',
          left: '-8px',
          right: '-8px',
          bottom: '-8px',
          boxShadow: '0 12px 40px rgba(0,0,0,0.3)',
        }}
        initial={{ opacity: 0, scale: 0.92 }}
        animate={{ opacity: 0.5, scale: 1 }}
        transition={{ duration: 0.3, delay: 0.1 }}
      />
      
      <motion.div
        className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
        style={{
          rotate: rotation2,
          zIndex: 2,
          top: '-4px',
          left: '-4px',
          right: '-4px',
          bottom: '-4px',
          boxShadow: '0 16px 48px rgba(0,0,0,0.35)',
        }}
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 0.7, scale: 1 }}
        transition={{ duration: 0.3, delay: 0.15 }}
      />

      <motion.div
        className="relative z-10 w-full h-full rounded-lg overflow-hidden"
        style={{
          boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
        }}
        whileHover={
          shouldReduceMotion
            ? {}
            : {
                scale: 1.02,
                rotateY: 3,
                rotateX: -2,
                y: -12,
                transition: {
                  type: 'spring',
                  stiffness: 200,
                  damping: 20,
                },
              }
        }
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.2 }}
      >
        <motion.div
          className="absolute inset-0 pointer-events-none rounded-lg"
          whileHover={
            shouldReduceMotion
              ? {}
              : {
                  boxShadow: '0 0 40px rgba(25, 140, 255, 0.4)',
                  transition: { duration: 0.2 },
                }
          }
        />
        {children}
      </motion.div>
    </div>
  );
}