/** @jsxRuntime classic */
import "./tailwind.css";
import domReady from "@wordpress/dom-ready";
import { createRoot } from "@wordpress/element";
import * as React from "react";

import LeadboosterDesign from "../components/leadboosterTabbedForm/leadboosterDesign";

// Stub for Script: logs the src and renders nothing.
interface ScriptProps {
  src: string;
}
const Script: React.FC<ScriptProps> = ({ src }) => {
  console.log("Script loaded:", src);
  return null;
};

// Stub for Image: renders a standard <img> element.
interface ExtendedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  priority?: boolean; //  support for Next.js-like priority prop
}

function Leadbooster() {
  return (
    <div className="whitespace-normal">
      <Script src={"https://widgets.justin-legal.com/calculators.bundle.js"} />
      <div className="px-6 sm:px-12 lg:px-24 max-w-[100rem] mx-auto">
        <div className="w-full flex justify-center"></div>
        <div className="w-full flex justify-center">
          <h2 className="text-2xl xxxs:text-3xl lg:text-5xl lg:my-4 leading-tight font-bold tracking-tighter">
            Design
          </h2>
        </div>

        <div className="mt-24 font-mono">
          <p className="text-xl text-center px-8 sm:px-24 mt-6">
            Passe das Design aller widgets an das visuelle Erscheinungsbild
            deiner Kanzlei an. Änderungen werden für überall angewendet.
          </p>
          <div className="mt-24">
            <LeadboosterDesign />
          </div>
        </div>
      </div>
    </div>
  );
}

const LeadBoosterConfigDesign: React.FC = () => {
  return Leadbooster();
};

domReady(() => {
  const container = document.getElementById("design-app");
  if (container) {
    const root = createRoot(container);
    root.render(<LeadBoosterConfigDesign />);
  }
});

export default LeadBoosterConfigDesign;