import { ArrowLeft, Braces, Bug, CheckCircle2, Save } from "lucide-react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";

export function EditorToolbar({
  dirty,
  showJson,
  onShowJson,
  onSave,
  onValidate,
  onDebug,
  busy,
}: {
  dirty: boolean;
  showJson: boolean;
  busy?: boolean;
  onShowJson: () => void;
  onSave: () => void;
  onValidate: () => void;
  onDebug: () => void;
}) {
  return (
    <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-elevated p-3">
      <div className="flex items-center gap-2">
        <Link to="/workflows" className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-muted">
          <ArrowLeft className="h-4 w-4" />
        </Link>
        <span className="text-sm text-muted-foreground">{dirty ? "Unsaved changes" : "Saved"}</span>
      </div>
      <div className="flex flex-wrap gap-2">
        <Button variant="outline" onClick={onShowJson}>
          <Braces className="h-4 w-4" /> {showJson ? "Hide JSON" : "JSON"}
        </Button>
        <Button variant="outline" disabled={busy} onClick={onValidate}>
          <CheckCircle2 className="h-4 w-4" /> Validate
        </Button>
        <Button variant="outline" disabled={busy} onClick={onDebug}>
          <Bug className="h-4 w-4" /> Debug
        </Button>
        <Button disabled={busy} onClick={onSave}>
          <Save className="h-4 w-4" /> {busy ? "Working..." : "Save"}
        </Button>
      </div>
    </div>
  );
}