"use client";

import { useVisualization } from "./visualization-context";

function formatValue(value: unknown): string {
  if (value === null) return "null";
  if (value === undefined) return "undefined";
  if (typeof value === "string") return `"${value}"`;
  if (typeof value === "boolean") return value ? "true" : "false";
  if (Array.isArray(value)) return `[${value.map(formatValue).join(", ")}]`;
  if (typeof value === "object") return JSON.stringify(value);
  return String(value);
}

export function VariablesPane() {
  const { currentStep } = useVisualization();

  if (!currentStep?.variables || Object.keys(currentStep.variables).length === 0) {
    return null;
  }

  return (
    <div className="rounded-lg border border-border bg-card p-3">
      <h4 className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
        Variables
      </h4>
      <div className="flex flex-wrap gap-3">
        {Object.entries(currentStep.variables).map(([name, value]) => (
          <div
            key={name}
            className="flex items-center gap-2 rounded-md bg-muted px-2 py-1"
          >
            <span className="font-mono text-sm font-medium text-primary">
              {name}
            </span>
            <span className="text-muted-foreground">=</span>
            <span className="font-mono text-sm">{formatValue(value)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}