components/editor/main/endpoint.tsx

import { useMemo } from "react";
import classNames from "classnames";

import { Method } from "@/components/method";
import { splitStringBracket } from "@/utils";
import { ApiRoute } from "@/utils/type";
import { Parameter } from "./parameter";

export const Endpoint = ({
  endpoint,
  children,
  onChange,
}: {
  endpoint: ApiRoute;
  children: React.ReactElement;
  onChange: (value: string) => void;
}) => {
  const path_formatted = useMemo(
    () => splitStringBracket(endpoint.path),
    [endpoint.path]
  );

  const handleChange = (value: string, index: number) => {
    const currentString = splitStringBracket(endpoint.path);
    currentString[index] = value;
    onChange(currentString.join(""));
  };

  return (
    <div className="bg-slate-900 w-full">
      <div className="bg-slate-950/50 p-3 rounded-lg flex items-center justify-between">
        <div className="text-white text-sm flex items-center justify-start gap-2 w-full">
          <Method method={endpoint.method} />
          <div className="flex items-center justify-start gap-1">
            {path_formatted.map((p, i) => {
              const isCustomizable = p.startsWith("{") && p.endsWith("}");
              return isCustomizable ? (
                <Parameter
                  key={i}
                  value={p}
                  onChange={(value) => handleChange(value, i)}
                />
              ) : (
                <p key={i} className="text-slate-300">
                  {p}
                </p>
              );
            })}
          </div>
        </div>
        {children}
      </div>
    </div>
  );
};