import { Prose } from '#components/ui/prose'

// Used for syntax highlighting
const html = String.raw

const content = html`
  <h1>Title Heading 1</h1>
  <h2>Title Heading 2</h2>
  <h3>Title Heading 3</h3>
  <h4>Title Heading 4 <code>testing</code></h4>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dolor nec
    ex rutrum semper. Praesent ultricies purus eget lectus tristique egestas ac
    in lacus. Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
  </p>

  <hr />

  <p>
    Fusce placerat ipsum vel sollicitudin imperdiet. Morbi vulputate non diam at
    consequat. Donec vitae sem eu arcu auctor scelerisque vel in turpis.
  </p>
`

export const ProseBasic = () => {
  return <Prose dangerouslySetInnerHTML={{ __html: content }} />
}

import { For, Stack, Text } from '@chakra-ui/react'
import { Prose } from '#components/ui/prose'

export const ProseWithSizes = () => {
  return (
    <Stack gap="10">
      <For each={['md', 'lg'] as const}>
        {(size) => (
          <Stack key={size}>
            <Text textStyle="sm" color="fg.muted">
              size: {size}
            </Text>
            <Prose size={size}>
              <h2>Title Heading 2</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
                at dolor nec ex rutrum semper. Praesent ultricies purus eget
                lectus tristique egestas ac in lacus.
              </p>
            </Prose>
          </Stack>
        )}
      </For>
    </Stack>
  )
}

import { Prose } from '#components/ui/prose'

// Used for syntax highlighting
const html = String.raw

const content = html`
  <h3>Blockquotes</h3>
  <blockquote>This is a good looking blockquote!</blockquote>
  <p>And it can span into multiple lines:</p>
  <blockquote>
    Fusce placerat ipsum vel sollicitudin imperdiet. Morbi vulputate non diam at
    consequat. Donec vitae sem eu arcu auctor scelerisque vel in turpis.
  </blockquote>
  <p>
    There&apos;s also <strong>strong</strong>, <b>b</b> and <em>em</em> support
    as well.
  </p>
`

export const ProseWithBlockquote = () => {
  return <Prose dangerouslySetInnerHTML={{ __html: content }} />
}

import { Prose } from '#components/ui/prose'

// Used for syntax highlighting
const html = String.raw

const content = html`
  <h3>Lists</h3>
  <p>Let's look at some unordered lists. Things to buy:</p>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
    <li>Saas UI Pro license</li>
  </ul>
  <p>And some ordered lists. Things to do:</p>
  <ol>
    <li>Pay the bills</li>
    <li>Walk the dog</li>
    <li>Take out trash</li>
  </ol>
`

export const ProseWithList = () => {
  return <Prose dangerouslySetInnerHTML={{ __html: content }} />
}

import { Prose } from '#components/ui/prose'

// Used for syntax highlighting
const html = String.raw

const content = html`
  <h3>Tables</h3>
  <table>
    <thead>
      <tr>
        <th>Plan</th>
        <th>Seats</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Starter</td>
        <td>3</td>
        <td>$0</td>
      </tr>
      <tr>
        <td>Team</td>
        <td>25</td>
        <td>$49</td>
      </tr>
      <tr>
        <td>Enterprise</td>
        <td>Unlimited</td>
        <td>Custom</td>
      </tr>
    </tbody>
  </table>
`

export const ProseWithTable = () => {
  return <Prose dangerouslySetInnerHTML={{ __html: content }} />
}

import { Prose } from '#components/ui/prose'
import Markdown from 'react-markdown'

const content = `
## Heading

Based on your Saas UI plan. So [click here](https://saas-ui.dev) to confirm your plan.

- first item
- second item
- third item
`

export const ProseWithReactMarkdown = () => {
  return (
    <Prose>
      <Markdown>{content}</Markdown>
    </Prose>
  )
}