import { Loader2, Play } from "lucide-react";
import { Button } from "../ui/button";

type JsonTabProps = {
  jsonBody: string;
  setJsonBody: (value: string) => void;
  running: boolean;
  clientName: string | null;
  onRunJson: () => void;
};

export function JsonTab({
  jsonBody,
  setJsonBody,
  running,
  clientName,
  onRunJson,
}: JsonTabProps) {
  return (
    <div className="flex-1 m-0 overflow-hidden">
      <div className="flex flex-col h-full p-6 gap-4">
        <p className="text-xs text-muted-foreground">
          Edit the pipeline request JSON directly and run it.
        </p>
        <textarea
          value={jsonBody}
          onChange={(e) => setJsonBody(e.target.value)}
          className="flex-1 rounded-lg border border-input bg-background p-3 font-mono text-body-sm text-foreground outline-none focus:ring-1 focus:ring-ring resize-none"
          spellCheck={false}
        />
        <div className="flex items-center gap-3">
          <Button onClick={onRunJson} disabled={running || !clientName}>
            {running ? (
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <Play className="h-3.5 w-3.5" />
            )}
            {running ? "Running..." : "Run Pipeline"}
          </Button>
        </div>
      </div>
    </div>
  );
}
