/**
 * Evaluate a math expression.
 * @param {string} expression - The math expression (e.g., "2 + 2 * (3 - 1)").
 * @returns {number} The result of the expression.
 */
export function math_eval(expression) {
  // Only allow numbers, spaces, and math symbols: + - * / % ( ) .
  if (!/^[\d\s+\-*/%.()]+$/.test(expression)) {
    throw new Error("Invalid characters in expression.");
  }
  return Function('"use strict";return (' + expression + ")")();
}

export default (input, output) =>
  React.createElement(
    "div",
    { className: "bg-emerald-50 border border-emerald-200 rounded-lg p-4" },
    React.createElement(
      "div",
      { className: "flex items-center mb-2" },
      React.createElement(
        "div",
        {
          className:
            "w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center mr-3",
        },
        "🧮",
      ),
      React.createElement(
        "h3",
        { className: "text-emerald-900 font-semibold" },
        "Math Evaluation",
      ),
    ),
    React.createElement(
      "div",
      { className: "text-center" },
      React.createElement(
        "div",
        { className: "text-lg font-mono text-emerald-700 mb-1" },
        input.expression || "Unknown expression",
      ),
      React.createElement(
        "div",
        { className: "text-2xl font-bold text-emerald-600 mb-1" },
        `= ${output}`,
      ),
      React.createElement(
        "p",
        { className: "text-emerald-500 text-xs" },
        "Calculation result",
      ),
    ),
  );