import { Layout, Playground, Attributes } from 'lib/components'
import { Description, Code } from 'components'

export const meta = {
  title: 'Description',
  group: 'Data Display',
}

## Description

Display brief information with a title and description.

<Playground
  desc="`Description` component contains title and content."
  scope={{ Description }}
  code={`
<Description title="Section Title" content="Data about this section." />
`}
/>

<Playground
  title="With Component"
  desc="Use in combination with other components."
  scope={{ Description, Code }}
  code={`
<Description title="Section Title" content={<p><Code>code</Code> about this section.</p>} />
`}
/>

<Attributes edit="/pages/en-us/components/description.mdx">
<Attributes.Title>Description.Props</Attributes.Title>

| Attribute   | Description  | Type                   | Accepted values | Default |
| ----------- | ------------ | ---------------------- | --------------- | ------- |
| **title**   | title text   | `ReactNode` / `string` | -               | -       |
| **content** | title text   | `ReactNode` / `string` | -               | -       |
| ...         | native props | `HTMLAttributes`       | -               | -       |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
