import type { ReactNode } from "react";

/**
 * One labelled row of the sidebar Live Preview ("Color", "Button/Label", ...).
 *
 * The wrapper exposes the active layout as `data-preview-layout` so the shell
 * stylesheet can keep wide single-row layouts (pill and grid) scrolling inside
 * the panel instead of leaking out of the preview stage.
 */
export type PreviewPanelProps = {
  label: ReactNode;
  layout: string;
  children: ReactNode;
};

export function PreviewPanel({ label, layout, children }: PreviewPanelProps) {
  return (
    <div className="b3-wvs-shell-preview-panel" data-preview-layout={layout}>
      <div className="b3-wvs-shell-preview-panel-label bwvs:text-xs bwvs:font-semibold bwvs:text-gray-700">
        {label}
      </div>
      <div className="b3-wvs-shell-preview-panel-body">{children}</div>
    </div>
  );
}

export default PreviewPanel;