import React from "react";
import { decodeText, decodeTextWithHTML } from "@/lib/utils";

interface SafeTextProps {
  children: string | null | undefined;
  className?: string;
  as?: React.ElementType;
  allowHTML?: boolean;
  allowedTags?: string[];
  [key: string]: unknown;
}

/**
 * SafeText component that automatically decodes HTML entities and special characters
 * Use this component for any text content that might contain special characters from API
 */
export default function SafeText({
  children,
  className,
  as: Component = "span",
  allowHTML = false,
  allowedTags,
  ...props
}: SafeTextProps) {
  const decodedText = allowHTML
    ? decodeTextWithHTML(children, allowedTags)
    : decodeText(children);

  if (allowHTML) {
    return React.createElement(Component, {
      className,
      dangerouslySetInnerHTML: { __html: decodedText },
      ...props,
    });
  }

  return React.createElement(Component, { className, ...props }, decodedText);
}