import React from 'react';
import TemplateFive 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 Five',
  component: TemplateFive,
  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,
    },
    featureImg: {
      name: 'Fature Image',
      type: { name: 'fetaure img' },
      defaultValue: pageOperatorData?.featureImg,
    },
    name: {
      name: 'Operator Name',
      type: { name: 'String' },
      defaultValue: pageOperatorData?.name,
    },
    extraFields: {
      name: 'Extra Fields ',
      type: { name: 'String' },
      defaultValue: pageOperatorData?.extraFields,
    },
    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) => <TemplateFive {...args} />;

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

Default.args = {};
