import React from 'react'
import { storiesOf } from '@storybook/react'
import { styled } from 'view-container'
import Link from 'atoms/Link'
import Image from 'atoms/Image'
import FacebookIcon from 'atoms/Icons/SocialIcon/FacebookIcon'

const renderImage = props => <Image nowrap alt={props.text} />
const renderFBIcon = () => (
  <React.Fragment>
    <FacebookIcon />
  </React.Fragment>
)

storiesOf('atoms/Link', module)
  .add('Text + to', () => <Link text="uxui.skava.com" to="https://uxui.skavaone.com" />)
  .add('A tag with Image', () => (
    <Link
      text="this is passed to renderChildren, in this case, used as the alt in the image"
      to="https://www.google.com"
      renderChildren={renderImage}
    />
  ))
  .add('A tag with Icon', () => <Link text="facebook" to="https://www.facebook.com" />)
  // <Link to.... children="this is children" />
  .add('nofollow & children', () => (
    <Link to="https//eh.com" nofollow>
      this is children
    </Link>
  ))