---
import Code from '@shortcodes/Code.astro'
import Example from '@shortcodes/Example.astro'
import * as tableContent from '@shortcodes/TableContent.md'

interface Props {
  /**
   * Any class(es) to be added to the `<table>` element (both in the example and code snippet).
   */
  class?: string
  /**
   * Show a simplified version in the example code snippet by replacing the table content inside `<table>` & `</table>`
   * with `...`.
   * @default true
   */
  simplified?: boolean
}

const { class: className, simplified = true } = Astro.props

const tableCode = `<table${className ? ` class="${className}"` : ''}>
${simplified ? '  ...' : await tableContent.compiledContent()}
</table>`

const exampleCode = `<table${className ? ` class="${className}"` : ''}>
${await tableContent.compiledContent()}
</table>`
---

<Example showMarkup={false} code={exampleCode} />

<Code code={tableCode} lang="html" />