import { Card, Space, Typography } from 'antd';
import { MarkdownPreviewCard } from '../../../components/markdownPreview';
import { useMainLayoutContext } from '../layout/MainLayoutContext';
import { getDocsSectionLabel } from '../routes';

const { Text } = Typography;

export function DocsPage() {
  const { selectedDocsMenu, selectedDocs } = useMainLayoutContext();

  return (
    <div className="app-main-panel docs-page">
      <Card
        title={`Docs / ${getDocsSectionLabel(selectedDocsMenu)}`}
        extra={<Text code>{selectedDocs.length} docs</Text>}
        className="app-main-card docs-page__card"
        bordered={false}
      >
        <div className="docs-page__scroll">
          <Space direction="vertical" size={16} className="app-main-stack docs-page__stack">
            {selectedDocs.map((document) => (
              <div key={document.id} id={`document-preview-${document.id}`} data-focus-id={`doc:${document.id}`}>
                <MarkdownPreviewCard document={document} />
              </div>
            ))}
          </Space>
        </div>
      </Card>
    </div>
  );
}
