import 'server-only';
import { readFile } from 'node:fs/promises';
import { join } from 'node:path';
import { marked } from 'marked';
import sanitizeHtml from 'sanitize-html';
import Expandable from './Expandable';

const basePath = '/web/react/demos/server-components';

export default async function Page() {
  const markdown = await readFile(
    join(process.cwd(), 'content/preview.md'),
    'utf8',
  );
  const html = sanitizeHtml(marked.parse(markdown));

  return (
    <main>
      <p className="eyebrow">React · Build-time Server Components</p>
      <h1>Prepared before your visit</h1>
      <p className="intro">
        This preview was read from a Markdown file during the build.
        The button below changes local state in your browser.
      </p>
      <Expandable title="Article preview">
        <article className="preview" dangerouslySetInnerHTML={{ __html: html }} />
      </Expandable>
      <p className="hint">
        Reload with JavaScript disabled: the preview is still in the initial HTML.
        Enable JavaScript to hide and show it.
      </p>
      <nav aria-label="Demo resources">
        <a href="/web/react/server-components/" target="_top">Read the chapter</a>
        <a href={`${basePath}/source/page.jsx.txt`} target="_blank" rel="noopener">Server Component source</a>
        <a href={`${basePath}/source/Expandable.jsx.txt`} target="_blank" rel="noopener">Client Component source</a>
        <a href={`${basePath}/source/preview.md.txt`} target="_blank" rel="noopener">Markdown source</a>
      </nav>
    </main>
  );
}