"use client";

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

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

  if (!currentStep) {
    return null;
  }

  return (
    <div
      className="rounded-lg border border-border bg-muted/50 p-4"
      role="status"
      aria-live="polite"
    >
      <p className="text-sm leading-relaxed">{currentStep.description}</p>
    </div>
  );
}