import {Refractor} from '@modal-sh/react-refractor';
import {NextPage} from 'next';
import * as React from 'react';
import {getFormValues} from '@theoryofnekomata/formxtra';

const BlogPostPage: NextPage = () => {
  const handleAction: React.FormEventHandler<HTMLFormElement> = React.useCallback((e) => {
    e.preventDefault();
    const { currentTarget, nativeEvent } = e;
    const { submitter } = nativeEvent as unknown as { submitter: HTMLButtonElement };
    const { action } = getFormValues(currentTarget, { submitter });
    switch (action) {
    case 'copyContents':
      console.log('copy contents');
      break;
    default:
      break;
    }
  }, []);

  return (
    <>
      <div className="container mx-auto px-4">
        <h1>
          Using Refractor on your Next website
        </h1>
        <p>
          Use <code>@modal-sh/react-refractor</code> as follows on your page:
        </p>
      </div>
      <div className="bg-shade/20 overflow-auto pt-4 pb-8 text-sm">
        <div className="container mx-auto px-4">
          <Refractor
            lineNumbers
            header
            language="tsx"
            scroll
            actions={
              <></>
            }
            code={`import {Refractor} from '@modal-sh/react-refractor';
import {NextPage} from 'next';

const BlogPostPage: NextPage = () => {
  return (
    <div className="container mx-auto px-4">
      <Refractor
        language="tsx"
        code={\`
          import {Refractor} from '@modal-sh/react-refractor';
        \`}
      />
    </div>
  );
};

export default BlogPostPage;
`}
          />
        </div>
      </div>
      <div className="container mx-auto px-4">
        <p>
          Easy as that!
        </p>
      </div>
    </>
  )
};

export default BlogPostPage;