import React from 'react';
import TemplateThree from '.';
import getOperatorData from '../../../../../../../tests/factories/pages/operator.factory';
import Verify from '~images/icons/verify';

const pageOperatorData = getOperatorData();

export default {
  title: 'Theme/Layout/Header/Operator/Template Three',
  component: TemplateThree,
  argTypes: {
    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: <Verify color="#295DD6" />,
    },
  },
};

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

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

Default.args = {};
