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

export interface TextProps extends HTMLMotionProps<"span"> {
  children?: React.ReactNode;
  pdfStyle?: any;
}

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

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

  return (
    <motion.span className={className} style={style} {...props}>
      {children}
    </motion.span>
  );
};