import React from 'react';
import { View } from '@react-pdf/renderer';
import { motion, HTMLMotionProps } from 'framer-motion';
import { useEnvironment } from '../context/EnvironmentContext';

export interface BoxProps extends HTMLMotionProps<"div"> {
  children?: React.ReactNode;
  pdfStyle?: any; // Specifically for PDF if Tailwind mapping is not enough
}

export const Box: React.FC<BoxProps> = ({ children, className, style, pdfStyle, ...props }) => {
  const env = useEnvironment();

  if (env === 'print') {
    return <View style={pdfStyle || style}>{children}</View>;
  }

  // Web and Presentation get Framer Motion by default
  return (
    <motion.div className={className} style={style} {...props}>
      {children}
    </motion.div>
  );
};