Here is an example of Markdown syntax:

**Headers:**

* `# Heading 1`
* `## Heading 2`
* `### Heading 3`

**Text Styles:**

* **Bold:** `**This text is bold**`
* *Italics:* `*This text is italicized*`
* ***Bold and Italics:*** `***This text is bold and italicized***`

**Lists:**

* **Unordered list:**
  * Item 1
  * Item 2
  * Item 3
* **Ordered list:**
  1. Item 1
  2. Item 2
  3. Item 3

**Links:**

* [This is a link to Google](https://www.google.com)

**Images:**

* ![Image alt text](https://www.example.com/image.jpg)

**Code:**

* Inline code: `` `This is inline code` ``
* Block code: 
```python
def hello_world():
  print("Hello, world!")
 

**Horizontal Rule:**

 --- 

**Tables:**

| Header 1 | Header 2 |
|---|---|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |

**Blockquotes:**

> This is a blockquote.

**Emphasis:**

* You can also emphasize text with underscores: _This text is italicized_
* You can also make text bold with double asterisks: **This text is bold**

This is a basic example of Markdown syntax. There are many other features available, such as code highlighting, footnotes, and tables. For more information, you can check out the official Markdown documentation at [https://www.markdownguide.org/](https://www.markdownguide.org/). 

import React, { useRef, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

/**
 * A component that renders markdown content with syntax highlighting and GitHub Flavored Markdown (GFM) support.
 *
 * @param {object} props - The component props.
 * @param {string} props.children - The markdown content to render.
 *
 * @returns {JSX.Element} The rendered markdown content with a "Copy to Clipboard" button.
 *
 * @example
 *
 * const markdownContent = `
 * # Hello, world!
 *
 * This is an example of markdown content.
 *
 * `;
 *
 * <MdView>{markdownContent}</MdView>;
 *
 */
export default function MdView({ children }) {
	const contentRef = useRef(null);
	const [copied, setCopied] = useState(false);

	// Function to copy rendered visible text content to clipboard
	const copyToClipboard = () => {
		if (contentRef.current) {
			const visibleText = contentRef.current.textContent; // Get only visible text
			navigator.clipboard.writeText(visibleText);
			setCopied(true); // Set copied to true immediately
			setTimeout(() => {
				setCopied(false);
			}, 10000);
		}
	};

	return (
		<div className="relative p-1 pb-0 min-h-min w-full overflow-auto group moderscroller">
			<button
				onClick={copyToClipboard}
				className="absolute top-2 right-2 px-3 py-1 transition-colors duration-200 bg-gray-900 border border-gray-900 hover:border-transparent text-sm font-medium text-white rounded hidden group-hover:block"
			>
				{copied ? 'Copied!' : 'Copy to Clipboard'}
			</button>
			<div ref={contentRef}>
				<ReactMarkdown remarkPlugins={[remarkGfm]} className="markdown-container">
					{children}
				</ReactMarkdown>
			</div>
		</div>
	);
}