import React from 'react';
import TemplateFour from '.';
import getPaymentData from '../../../../../../../tests/factories/pages/payment.factory';
import checkMark from '../../../../../../../storybook-images/verify.svg';

const pagePayment = getPaymentData();

export default {
  title: 'Theme/Layout/Header/Payment/Template Four',
  component: TemplateFour,
  argTypes: {
    type: {
      name: 'Type',
      type: { name: 'String' },
      defaultValue: pagePayment?.type,
    },
    sections: {
      name: 'Sections',
      defaultValue: pagePayment?.sections,
    },
    image: {
      name: 'Image',
      type: { name: 'img' },
      defaultValue: pagePayment?.standardised_logo_filename_object,
    },
    name: {
      name: 'Operator Name',
      type: { name: 'String' },
      defaultValue: pagePayment?.name,
    },
    numOfStars: {
      name: 'Number of Stars',
      type: { name: 'number' },
      defaultValue: pagePayment?.numOfStars,
    },
    relation: {
      name: 'Relation',
      type: { name: 'object' },
      defaultValue: pagePayment?.relation,
    },
    icon: {
      name: 'Icon',
      defaultValue: checkMark,
    },
  },
};

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

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

Default.args = {};
