"use client";

import { VisualizationProvider } from "./visualization-context";
import { StepController } from "./step-controller";
import { StepDescription } from "./step-description";
import { VariablesPane } from "./variables-pane";
import { StructureRenderer } from "./structure-renderer";
import type { VisualizationData } from "@/types/visualization";

interface VisualizationContainerProps {
  data: VisualizationData;
  className?: string;
}

export function VisualizationContainer({
  data,
  className = "",
}: VisualizationContainerProps) {
  if (!data.steps || data.steps.length === 0) {
    return (
      <div className="rounded-lg border border-border bg-muted/50 p-8 text-center text-muted-foreground">
        No visualization steps available
      </div>
    );
  }

  return (
    <VisualizationProvider data={data}>
      <div className={`flex flex-col gap-4 ${className}`}>
        {/* Title */}
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-semibold">{data.title}</h3>
        </div>

        {/* Step description */}
        <StepDescription />

        {/* Data structure visualization */}
        <div className="rounded-lg border border-border bg-card p-4">
          <StructureRenderer />
        </div>

        {/* Variables */}
        <VariablesPane />

        {/* Controls */}
        <StepController />
      </div>
    </VisualizationProvider>
  );
}