import { useState } from "react";
import { ParameterViewer } from "./ParameterViewer";
import { Item } from "../interfaces/Item";

interface Props {
  component: (props: any) => JSX.Element;
  props: any;
  options?: Item["options"];
}

export function ComponentViewer({
  component: Component,
  props: propsInit,
  options,
}: Props) {
  const [props, setProps] = useState(propsInit);

  return (
    <div>
      <div className="component-book cb-mb-5 cb-font-semibold cb-text-black dark:cb-text-white">
        Component:
      </div>
      <div className="component-book cb-border cb-border-solid cb-border-slate-200 dark:cb-border-slate-700 cb-p-5 cb-w-full min-h-200px">
        <div className="component-book cb-relative">
          {Component && <Component {...props} />}
        </div>
      </div>

      {props && (
        <>
          <div className="component-book cb-my-5 cb-font-semibold cb-text-black dark:cb-text-white">
            Parameters:
          </div>
          <div className="cb-mb-20">
            <ParameterViewer
              props={props}
              setProps={setProps}
              options={options}
            />
          </div>
        </>
      )}
    </div>
  );
}