import * as React from "react";
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";

type Method = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";

const METHOD_CLASS: Record<Method, string> = {
  GET: "bg-success-soft text-success",
  POST: "bg-accent-soft text-accent",
  PUT: "bg-warning-soft text-warning",
  PATCH: "bg-warning-soft text-warning",
  DELETE: "bg-danger-soft text-danger",
};

export function Endpoint({
  method,
  path,
  scope,
  status,
  className,
}: {
  method: Method;
  path: string;
  /** Required API key scope, if any. */
  scope?: string | null;
  status?: "Live" | "Coming soon";
  className?: string;
}) {
  return (
    <div className={cn("my-5 flex flex-wrap items-center gap-3 rounded-lg border border-border bg-bg-subtle px-3.5 py-2.5", className)}>
      <span className={cn("rounded-[5px] px-2 py-0.5 font-mono text-[12px] font-semibold tracking-wide", METHOD_CLASS[method])}>{method}</span>
      <code className="font-mono text-[13.5px] text-fg">{path}</code>
      <span className="ml-auto flex items-center gap-2">
        {scope ? (
          <span className="text-[12px] text-fg-subtle">
            scope <code className="rounded-[4px] border border-border bg-bg px-1.5 py-px font-mono text-[11.5px] text-fg-muted">{scope}</code>
          </span>
        ) : scope === null ? (
          <span className="text-[12px] text-fg-subtle">any valid key</span>
        ) : null}
        {status ? (
          <Badge variant={status === "Live" ? "success" : "warning"} dot>
            {status}
          </Badge>
        ) : null}
      </span>
    </div>
  );
}