story-generator/src/components/ui/adaptive-text.tsx

import React from 'react';
import { cn } from '../../lib/utils';

interface AdaptiveTextProps extends React.HTMLAttributes<HTMLSpanElement> {
  text: string;
  isUpperCase: boolean;
  as?: keyof JSX.IntrinsicElements;
  preserveWhitespace?: boolean;
}

export const AdaptiveText = React.memo(({
  text,
  isUpperCase,
  as: Component = 'span',
  preserveWhitespace = false,
  className,
  ...props
}: AdaptiveTextProps) => {
  // Transformar o texto mantendo espaços em branco se necessário
  const transformedText = React.useMemo(() => {
    const transformed = isUpperCase ? text.toUpperCase() : text;
    return preserveWhitespace ? transformed : transformed.trim();
  }, [text, isUpperCase, preserveWhitespace]);

  return React.createElement(
    Component,
    {
      className: cn(
        'transition-colors duration-200',
        className
      ),
      ...props
    },
    transformedText
  );
});

AdaptiveText.displayName = 'AdaptiveText';

// Variantes específicas para diferentes contextos
export const AdaptiveTitle = ({
  className,
  ...props
}: AdaptiveTextProps) => (
  <AdaptiveText
    as="h1"
    className={cn(
      'text-2xl font-bold text-gray-900',
      className
    )}
    {...props}
  />
);

export const AdaptiveParagraph = ({
  className,
  ...props
}: AdaptiveTextProps) => (
  <AdaptiveText
    as="p"
    className={cn(
      'text-base text-gray-700 leading-relaxed',
      className
    )}
    {...props}
  />
);

export const AdaptiveLabel = ({
  className,
  ...props
}: AdaptiveTextProps) => (
  <AdaptiveText
    as="span"
    className={cn(
      'text-sm font-medium text-gray-600',
      className
    )}
    {...props}
  />
);

// Hook para memoização de textos longos
export function useAdaptiveText(text: string, isUpperCase: boolean) {
  return React.useMemo(
    () => isUpperCase ? text.toUpperCase() : text,
    [text, isUpperCase]
  );
}