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="#" color 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` |
| **ref**       | forwardRef                  | <Code>Ref<HTMLAnchorElement &#124; null></Code> | -                      | -       |
| ...           | native props                | `AnchorHTMLAttributes`                          | `'rel', 'target', ...` | -       |

</Attributes>

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