import React from 'react';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import getAuthorList from '../../../../../../../tests/factories/authors/author.factory';
import verifyIcon from '../../../../../../../storybook-images/verify.svg';
import TemplateFour from '.';

const author = getAuthorList({})[1];
export default {
  title: 'Theme/Layout/Header/Author/Template Four',
  component: TemplateFour,
  author: {
    name: 'author',
    type: { name: 'object', required: false },
    defaultValue: null,
    description: 'The author object.',
  },
  translations: {
    name: 'translations',
    type: { name: 'object', required: false },
    defaultValue: {
      verified: 'Verified LANG',
      expert_on: 'Expert on LANG',
    },
    description: 'The translations object',
  },
};

const Template = (args) => (
  <Context.Provider value={{}}>
    <TemplateFour {...args} />
  </Context.Provider>
);
export const Default = Template.bind({});
Default.args = {
  // eslint-disable-next-line object-shorthand
  author: author,
  icons: {
    verify: verifyIcon,
  },
  translations: {
    verified: 'Verified LANG',
    expert_on: 'Expert on LANG',
  },
};
