// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Markdown } from "@coreai-ds/react-components";
import * as React from 'react';

const bulletedListFormatting = `## Flat spaced list
This is a regular bulleted list without spacing between items.

- List item 1
- List item 2
- List item 3

1. First ordered item
    1. Sub-item 1
    2. Sub-item 2
2. Second ordered item
    - Sub-item 1
    - Sub-item 2
3. Third ordered item

---

## Paragraph spacing list
This is a spaced list with that should be rendered as paragraphs between items.

- Paragraph spacing list item 1

- Paragraph spacing list item 2

- Paragraph spacing list item 3

---

## Mixed paragraph list with sub-items
This is a spaced list with that should be rendered as paragraphs between primary items and not between sub-items.

1. **Planning the Presentation**
   - Identify your audience.
     - Who are they?
     - What do they care about?
   - Define your objectives.

2. **Designing Your Slides**

   1. Choose a professional template.
   2. Follow design principles:
      - Use consistent fonts and colors.
      - Avoid overcrowding slides with text.

By following these steps, you can ensure a smooth and professional presentation that leaves a lasting impact!`;

const formatting = `
## Inline Text Formatting
This is a paragraph with **bold**, *italic*, ***bold-italic***, and \`inline code\` text.

---

${bulletedListFormatting}

---

## Raw markdown of above lists 
\`\`\`markdown
${bulletedListFormatting}
\`\`\`
`;

export const Formatting = (): JSXElement => <Markdown content={formatting}/>;

export default Formatting;