import type { ReactNode } from 'react';
import './demo-page-guide.css';

export type DemoPageGuide = {
  /** Shown under the "User guide" heading */
  summary: string;
  /** Optional: describes the rest of the public props API (not duplicated in the minimal snippet below). */
  propsOverview?: string;
  /** Optional capability bullets */
  features?: readonly string[];
  /** Minimal example: only the props you typically need to get started */
  code: string;
  /** Label above the code block (default: Example) */
  codeLabel?: string;
};

type DemoPageWithGuideProps = {
  guide: DemoPageGuide;
  children: ReactNode;
};

export function DemoPageWithGuide({ guide, children }: DemoPageWithGuideProps) {
  const { summary, propsOverview, features, code, codeLabel = 'Minimal example' } = guide;
  return (
    <div className="demo-page-layout">
      <div className="demo-page-layout__main">{children}</div>
      <aside className="demo-guide" aria-label="User guide">
        <div className="demo-guide__inner">
          <h2 className="demo-guide__title">User guide</h2>
          <p className="demo-guide__summary">{summary}</p>
          {propsOverview ? <p className="demo-guide__props-overview">{propsOverview}</p> : null}
          {features && features.length > 0 ? (
            <>
              <h3 className="demo-guide__subtitle">Features</h3>
              <ul className="demo-guide__list">
                {features.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            </>
          ) : null}
          <h3 className="demo-guide__subtitle">{codeLabel}</h3>
          <pre className="demo-guide__code" tabIndex={0}>
            <code>{code.trimEnd()}</code>
          </pre>
        </div>
      </aside>
    </div>
  );
}