/**
 * Open a webpage
 * @param {string} src - The URL of the webpage.
 * @returns {string} The validated URL.
 */
export function open_webpage(src) {
  try {
    const urlObj = new URL(src);
    if (!["http:", "https:"].includes(urlObj.protocol)) {
      throw new Error("Only HTTP and HTTPS URLs are allowed.");
    }
    return urlObj.href;
  } catch (error) {
    throw new Error("Invalid URL provided.");
  }
}

export default (input, output) => {
  return React.createElement(
    "div",
    { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
    React.createElement(
      "div",
      { className: "flex items-center mb-2" },
      React.createElement(
        "div",
        {
          className:
            "w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3",
        },
        "🌐",
      ),
      React.createElement(
        "h3",
        { className: "text-blue-900 font-semibold" },
        "Web Page",
      ),
    ),
    React.createElement("iframe", {
      src: output,
      className: "w-full border border-blue-300 rounded",
      width: 480,
      height: 360,
      title: "Embedded content",
      allow: "autoplay",
      frameBorder: "0",
    }),
  );
};