import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, number, text } from '@storybook/addon-knobs';

import logo from '../../../assets/images/stateseal.png';
import HeaderSlim from '../../..';
import { SiteLogo } from '../../../index';

storiesOf('organisms', module).addDecorator(withKnobs({ escapeHTML: false })).add('HeaderSlim', function () {
  var siteLogoProps = {
    url: {
      domain: text('HeaderSlim siteLogo: url domain', 'https://www.mass.gov/')
    },
    image: {
      src: text('HeaderSlim siteLogo: image src', logo),
      alt: text('HeaderSlim siteLogo: image alt', 'Massachusetts state seal'),
      width: number('HeaderSlim siteLogo: image width', 45),
      height: number('HeaderSlim siteLogo: image height', 45)
    },
    siteName: text('HeaderSlim siteLogo: siteName', 'Mass.gov'),
    title: text('HeaderSlim siteLogo: title', 'Mass.gov homepage')
  };
  var headerProps = {
    siteLogo: React.createElement(SiteLogo, siteLogoProps)
  };
  return React.createElement(HeaderSlim, headerProps);
});