import React, { FC, useState, useCallback, useRef, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Moon, Zap, LayoutGrid, Globe } from 'lucide-react';

interface DecorativeImageProps {
  src: string;
  alt: string;
  className: string;
  delay: number;
  x: number;
  y: number;
}

/**
 * Decorative image component for the About section.
 */
export const DecorativeImage: FC<DecorativeImageProps> = ({ src, alt, className, delay, x, y }) => {
  return (
    <motion.img
      src={src}
      alt={alt}
      className={`absolute ${className}`}
      initial={{ x: x, y: y, opacity: 0 }}
      animate={{ x: 0, y: 0, opacity: 1 }}
      transition={{ delay: delay, duration: 0.9, ease: [0.25, 0.1, 0.25, 1] }}
    />
  );
};