import React from 'react';
import TemplateOneThree from '.';
import getPaymentData from '../../../../../../../tests/factories/pages/payment.factory';
import Verify from '~images/icons/verify';

const pagePayment = getPaymentData();

export default {
  title: 'Theme/Layout/Header/Payment/Template One-Three',
  component: TemplateOneThree,
  argTypes: {
    template: {
      options: ['template_one', 'template_three'],
      control: { type: 'radio' },
    },
    type: {
      name: 'Type',
      type: { name: 'String' },
      defaultValue: pagePayment?.type,
    },
    sections: {
      name: 'Sections',
      defaultValue: pagePayment?.sections,
    },
    ribbons: {
      name: 'Ribbons',
      type: { name: 'array' },
      defaultValue: pagePayment?.ribbons,
    },
    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,
    },
    description: {
      name: 'Description',
      type: { name: 'String' },
      defaultValue: pagePayment?.description,
    },
    icon: {
      name: 'Icon',
      defaultValue: <Verify color="#295DD6" />,
    },
  },
};

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

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

Default.args = {};
