import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import Placeholder from '@theme/Placeholder';
import Link from '@theme/Link';
import CodeBlock from '@theme/CodeBlock';
import Heading from '@theme/Heading';
import useBaseUrl from '@docusaurus/useBaseUrl';
import Tabs from '@theme/Tabs';
import Button from '@theme/Button';
// import TabItem from '@theme/TabItem';
import { Stack, Plain } from '@theme/Stacks';

import Typo from './Typo';
import FlowGrid from './FlowGrid';
import McolGrid from './McolGrid';
import Stacks from './Stacks';

function TestPage(props) {
  const { siteConfig, siteConfig: { title, tagline } = {}, isClient } = useDocusaurusContext();

  return (
    <Layout key={isClient}>
      {/* <pre>{JSON.stringify(props, null, 2)}</pre> */}
      <div className="wrap-last frame">
        <div className="flow-grid-m pt-xxl">
          <div className="f-sans-xs" style={{ width: '25em' }}>
            <div className="prose-sans-xs">
              <h2>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</h2>
              <h3>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</h3>
              <h4>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</h4>
              <h5>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</h5>
              <h6>Nullam quis risus eget urna mollis ornare vel eu leo.</h6>
              <p>
                Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget
                quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
              </p>
              <p>
                Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget
                quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
              </p>
              <h2>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</h2>
              <p>
                Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget
                quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
              </p>
              <Placeholder aspect="2" />
            </div>
          </div>
          <div className="f-sans-s" style={{ width: '25em' }}>
            <div className="prose-sans-s">
              <h2>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</h2>
              <h3>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</h3>
              <h4>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</h4>
              <h5>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</h5>
              <h6>Nullam quis risus eget urna mollis ornare vel eu leo.</h6>
              <p>
                Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget
                quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
              </p>
              <p>
                Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget
                quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
              </p>
              <h2>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</h2>
              <p>
                Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget
                quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
              </p>
              <Placeholder aspect="2" />
            </div>
          </div>
          <div className="f-sans-m" style={{ width: '25em' }}>
            <div className="prose-sans-m">
              <h2>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</h2>
              <h3>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</h3>
              <h4>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</h4>
              <h5>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</h5>
              <h6>Nullam quis risus eget urna mollis ornare vel eu leo.</h6>
              <p>
                Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget
                quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
              </p>
              <p>
                Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget
                quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
              </p>
              <h2>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</h2>
              <p>
                Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget
                quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
              </p>
              <Placeholder aspect="2" />
            </div>
          </div>
        </div>
        {/* <Stacks /> */}
        {/* <Typo /> */}
        {/* <McolGrid /> */}
        {/* <FlowGrid /> */}
      </div>
    </Layout>
  );
}

export default TestPage;