import { cn } from "@/lib/utils";

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

interface ApiEndpointProps {
  method: HttpMethod;
  path: string;
  description?: string;
}

const methodColors: Record<HttpMethod, string> = {
  GET: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300",
  POST: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300",
  PUT: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300",
  PATCH: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300",
  DELETE: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300",
};

export function ApiEndpoint({ method, path, description }: ApiEndpointProps) {
  return (
    <div className="my-4 rounded-lg border bg-card overflow-hidden">
      <div className="flex items-center gap-3 px-4 py-3">
        <span
          className={cn(
            "text-xs font-bold px-2 py-0.5 rounded font-mono uppercase tracking-wide",
            methodColors[method]
          )}
        >
          {method}
        </span>
        <code className="text-sm font-mono text-foreground">{path}</code>
      </div>
      {description && (
        <div className="px-4 pb-3 text-sm text-muted-foreground border-t">{description}</div>
      )}
    </div>
  );
}
