import React from 'react'
import { storiesOf } from '@storybook/react'
import SocialIconList from 'molecules/SocialIconList'

const iconsListItems = [
  {
    textLabel: 'Twitter',
    url: 'http://twitter.com',
  },

  {
    textLabel: 'fb',
    url: '',
  },

  {
    textLabel: 'Google',
    url: 'http://googleplus.com',
  },

  {
    textLabel: 'Linkedin',
    url: 'http://linkedin.com',
  },

  {
    textLabel: 'Youtube',
    url: 'http://youtube.com',
  },

  {
    textLabel: 'Instagram',
    url: 'http://intagram.com',
  },

  {
    textLabel: 'Pinterest',
    url: 'http://pinterest.com',
  },
  {
    textLabel: 'Pinterest',
    url: 'http://pinterest.com',
    breed: 'withbg',
  },
]

const iconsListItemsColored = [
  {
    textLabel: 'Twitter',
    url: 'http://twitter.com',
    color: '#28aae1',
  },

  {
    textLabel: 'Facebook',
    url: 'http://facebook.com',
    color: '#3c5a99',
  },

  {
    textLabel: 'Google',
    url: 'http://googleplus.com',
    color: '#f5511e',
  },

  {
    textLabel: 'Linkedin',
    url: 'http://linkedin.com',
    color: '#0274b3',
  },

  {
    textLabel: 'Youtube',
    url: 'http://youtube.com',
    color: '#ff0000',
  },

  {
    textLabel: 'Instagram',
    url: 'http://intagram.com',
    color: '#fd355c',
  },

  {
    textLabel: 'Pinterest',
    url: 'http://pinterest.com',
    color: '#ee2d34',
  },

  {
    textLabel: 'Pinterest',
    url: 'http://pinterest.com',
    color: '#ee2d34',
    breed: 'withbg',
  },
]

storiesOf('molecules/SocialIconList', module)
  .add('default', () => <SocialIconList />)
  .add('Only Icon', () => <SocialIconList iconsList={iconsListItems} />)
  .add('Filled Color', () => (
    <SocialIconList iconsList={iconsListItemsColored} />
  ))