import React from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

import './ExploreContainer.css';

interface ContainerProps {
  name: string;
}

const markdown = `
Just a link: www.nasa.gov.
- [ ] helloworld
__bold__
# h1
## h2
### h3
#### h4 
##### h5
###### h6

| test |  test | test |
| --- | --- | --- |
| 1 | 1 | 1 |
`;

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  return (
    <div className='container'>
      <strong>{name}</strong>
      <p>
        Explore{' '}
        <a target='_blank' rel='noopener noreferrer' href='https://ionicframework.com/docs/components'>
          UI Components
        </a>
      </p>
      <div>
        <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
      </div>
    </div>
  );
};

export default ExploreContainer;
