import { Layout, Playground, Attributes } from 'lib/components'
import { Link, Text, Code, Spacer } from 'components'
import NextLink from 'next/link'

export const meta = {
  title: 'link',
  group: 'Navigation',
}

## Link

Hyperlinks between pages.

<Playground
  scope={{ Link }}
  code={`
<Link href="#">The Evil Rabbit Jumped over the Fence.</Link>
`} />

<Playground
  title="highlight"
  desc="Distinguish links with different colors."
  scope={{ Link }}
  code={`
<Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link>
`} />

<Playground
  title="With Icon"
  desc="Show an icon in the link."
  scope={{ Link, Spacer }}
  code={`
<>
  <Link href="#" icon>The Evil Rabbit Jumped over the Fence.</Link>
  <Spacer y={.5} />
  <Link href="#" icon color>The Evil Rabbit Jumped over the Fence.</Link>
</>
`} />


<Playground
  title="variant"
  desc="Different styles of links."
  scope={{ Link, Text }}
  code={`
<>
  <Text><Link href="#">The Evil Rabbit Jumped over the Fence.</Link></Text>
  <Text><Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link></Text>
  <Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
  <Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
</>
`} />

<Playground
  title="block"
  desc="Display as a separate block."
  scope={{ Link }}
  code={`
<Link href="#" block>The Evil Rabbit Jumped over the Fence.</Link>
`} />

<Playground
  title={<>With <Code>next/link</Code></>}
  desc="Use `Link` with NextJS without any configuration."
  scope={{ Link, NextLink }}
  code={`
<NextLink href="/en-us/components/button">
  <Link block>Docs of Button</Link>
</NextLink>
`} />

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

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **href** | link url | `string` | - | - |
| **color** | display color for link | `boolean` | - | `false` |
| **icon** | show icon | `boolean` | - | `false` |
| **underline** | display underline | `boolean` | - | `false` |
| **block** | display as a separate block | `boolean` | - | `false` |
| ... | native props | `AnchorHTMLAttributes` | `'rel', 'target', ...` | - |

</Attributes>

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