import { ApiEndpointDto } from "../dtos/ApiEndpointDto";
import { useTranslation } from "react-i18next";
import CollapsibleRow from "~/components/ui/tables/CollapsibleRow";
import ApiEndpointTitle from "./ApiEndpointTitle";
import MonacoEditor from "~/components/editors/MonacoEditor";

export default function ApiEndpoint({ item }: { item: ApiEndpointDto }) {
  const { t } = useTranslation();

  return (
    <div>
      <CollapsibleRow className="bg-secondary" value={<ApiEndpointTitle item={item} />} title={<ApiEndpointTitle item={item} />}>
        <div className="space-y-1 overflow-hidden pt-2">
          <div className="space-y-2">
            {item.responseSchema && (
              <>
                <div className="text-foreground text-sm font-bold">{t("api.docs.responseSchema")}</div>
                <div className="h-96 overflow-auto p-2">
                  <MonacoEditor value={item.responseSchema} onChange={() => {}} theme="vs-dark" language="json" />
                </div>
              </>
            )}
            {item.bodyExample && (
              <>
                <div className="text-foreground text-sm font-bold">{t("api.docs.bodyExample")}</div>
                <div className="h-96 overflow-auto p-2">
                  <MonacoEditor value={item.bodyExample} onChange={() => {}} theme="vs-dark" language="json" />
                </div>
              </>
            )}
          </div>
        </div>
      </CollapsibleRow>
    </div>
  );
}