import dynamic from "next/dynamic";
import { AiFillGithub } from "react-icons/ai";
import { SiStackblitz } from "react-icons/si";

import { examples } from "./generated/exampleComponents.gen";
import "./styles.css";

const baseGitHubURL = "https://github.com/TypeCellOS/BlockNote/tree/main/";
// const baseCodeSandboxURL =
//   "https://githubbox.com/TypeCellOS/BlockNote/tree/main/";

const baseStackBlitzURL =
  "https://www.stackblitz.com/github/TypeCellOS/BlockNote/tree/main/";

const ThemedExample = dynamic(() => import("./ThemedExample"), {
  ssr: false,
});

export function ExampleBlock(props: {
  name: keyof typeof examples;
  path: string;
  children: any;
}) {
  // const example = examplesFlattened.find((e) => e.slug === props.name);
  // if (!example) {
  //   throw new Error("invalid example");
  // }

  return (
    <div className="demo nx-bg-primary-700/5 dark:nx-bg-primary-300/10 mt-6 rounded-lg p-4">
      <div className={"flex flex-row gap-6 pb-4"}>
        <a
          className={
            "nx-select-none nx-text-gray-600 hover:nx-text-black dark:nx-text-gray-200 dark:hover:nx-text-white flex flex-row items-center gap-1"
          }
          href={`${baseGitHubURL}${props.path}/`}
          target="_blank">
          <AiFillGithub />
          <div className={"text-sm"}>GitHub</div>
        </a>
        <a
          className={
            "nx-select-none nx-text-gray-600 hover:nx-text-black dark:nx-text-gray-200 dark:hover:nx-text-white flex flex-row items-center gap-1"
          }
          href={`${baseStackBlitzURL}${props.path}/`}
          target="_blank">
          <SiStackblitz />
          <div className={"text-sm"}>StackBlitz</div>
        </a>
      </div>
      <div className={"demo-contents h-96 overflow-auto rounded-lg"}>
        <ThemedExample name={props.name} />
      </div>
      {props.children}
    </div>
  );
}