import React from 'react';
import { CodeBlock } from './CodeBlock';
import { ApiDocEntry, ApiSection } from '../types';

interface ContentPageProps {
  title: string;
  introduction?: string | React.ReactNode;
  sections?: ApiSection[];
  children?: React.ReactNode;
}

export const ContentPage: React.FC<ContentPageProps> = ({ title, introduction, sections, children }) => {
  return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500 mb-6 pb-2 border-b-2 border-gray-700">{title}</h1>
      {introduction && (
        <div className="prose prose-invert prose-lg max-w-none mb-8 text-gray-300">
          {typeof introduction === 'string' ? <p>{introduction}</p> : introduction}
        </div>
      )}
      {children} 
      {/* Render children (like InfoPanel) before sections if they are direct children of ContentPage */}
      {sections && sections.map((section, idx) => (
        <section key={idx} className="mb-12">
          <h2 className="text-3xl font-semibold text-purple-300 mb-4">{section.title}</h2>
          {section.description && <p className="text-gray-400 mb-6 text-lg">{section.description}</p>}
          {section.entries.map((entry, entryIdx) => (
            <div key={entryIdx} className="mb-10 p-6 bg-gray-800 rounded-xl shadow-lg">
              <h3 className="text-xl font-mono font-semibold text-green-400 mb-2 bg-gray-700 p-2 rounded-md inline-block">{entry.signature}</h3>
              <div className="text-gray-300 mb-3 prose prose-invert max-w-none">{typeof entry.description === 'string' ? <p>{entry.description}</p> : entry.description}</div>
              {entry.parameters && entry.parameters.length > 0 && (
                <div className="mb-3">
                  <h4 className="text-md font-semibold text-pink-400 mb-1">Parameters:</h4>
                  <ul className="list-disc list-inside space-y-1 pl-4 text-gray-400">
                    {entry.parameters.map((param, pIdx) => (
                      <li key={pIdx}>
                        <code className="text-sm bg-gray-700 px-1 rounded">{param.name}</code>: <code className="text-sm text-cyan-400">{param.type}</code> - {param.description}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              {entry.returns && (
                <div className="mb-3">
                  <h4 className="text-md font-semibold text-pink-400 mb-1">Returns:</h4>
                  <p className="text-gray-400">
                    <code className="text-sm text-cyan-400">{entry.returns.type}</code> - {entry.returns.description}
                  </p>
                </div>
              )}
              {entry.example && (
                <div className="mb-3">
                  <h4 className="text-md font-semibold text-pink-400 mb-1">Example:</h4>
                  <CodeBlock code={entry.example} language="lua" />
                </div>
              )}
              {/* Old notes rendering removed, as InfoPanel is now used directly within page content */}
            </div>
          ))}
        </section>
      ))}
    </div>
  );
};