import React from 'react';
import TemplateFive from '.';
import data from '../../../../../../tests/factories/cards/articles.factory';

export default {
  title: 'Theme/Modules/Cards/Operator/Template Five',
  component: TemplateFive,
  argTypes: {
    showAuthorAsLink: {
      name: 'showAuthorAsLink',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'Show author as a link?',
    },
    hasVariableComponent: {
      name: 'hasVariableComponent',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description:
        'if needs to show extra details, display them on a separate component at site level',
    },
    showDate: {
      name: 'showDate',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'Show/hide date',
    },
    verifyIcon: {
      name: 'verifyIcon',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'Show verify icon',
    },
    item: data,
  },
};

const Template = (args) => (
  <div
    style={{
      maxWidth: '30rem',
      margin: '0 auto',
    }}
  >
    <TemplateFive {...args} />
  </div>
);
export const Default = Template.bind({});
Default.args = {
  item: data,
  page: {
    reading_time: '5', // Add the reading_time value here (replace '5 mins' with the actual value)
  },
};
