import React from 'react';
import TemplateOne from '.';
import getOperatorData from '../../../../../../../tests/factories/pages/operator.factory';
import checkMark from '../../../../../../../storybook-images/verify.svg';

const pageOperatorData = getOperatorData();

export default {
  title: 'Theme/Layout/Header/Operator/Template One-Two',
  component: TemplateOne,
  argTypes: {
    template: {
      options: ['template_one', 'template_two'],
      control: { type: 'radio' },
    },
    type: {
      name: 'Type',
      type: { name: 'String' },
      defaultValue: pageOperatorData?.type,
    },
    ribbons: {
      name: 'Ribbons',
      type: { name: 'array' },
      defaultValue: pageOperatorData?.ribbons,
    },
    image: {
      name: 'Image',
      type: { name: 'img' },
      defaultValue: pageOperatorData?.image,
    },
    name: {
      name: 'Operator Name',
      type: { name: 'String' },
      defaultValue: pageOperatorData?.name,
    },
    numOfStars: {
      name: 'Number of Stars',
      type: { name: 'number' },
      defaultValue: pageOperatorData?.numOfStars,
    },
    relation: {
      name: 'Relation',
      type: { name: 'object' },
      defaultValue: pageOperatorData?.relation,
    },
    icon: {
      name: 'Icon',
      defaultValue: checkMark,
    },
  },
};

const Template = (args) => <TemplateOne {...args} />;

export const Default = Template.bind({});

Default.args = {};
