import React from 'react';
import TemplateSix from '.';
import { sampleOperatorCards } from '../../../../../../tests/factories/modules/matrix/card.factory';
import gameCardBgThumb from '../../../../../../storybook-images/game-card-bg-thumb.png';

const card = sampleOperatorCards.items[0];

export default {
  title: 'Theme/Modules/Cards/Game/Template Six',
  component: TemplateSix,
  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: {
      name: 'item',
      type: { name: 'object', required: false },
      defaultValue: null,
      description: 'The card object.',
    },
    translations: {
      name: 'translations',
      type: { name: 'object', required: false },
      defaultValue: {
        play_now_slots: 'Play Slots LANG',
      },
      description: 'The translations object',
    }
  }
};

const Template = (args) => (
  <div
    style={{
      maxWidth: '30rem',
      margin: '0 auto',
    }}
  >
    <TemplateSix {...args} />
  </div>
);
export const Default = Template.bind({});
Default.args = {
  item: {
    ...card,
    banner: '',
    title: 'Wolf Gold',
    author: {
      name: 'Melissa Kruger',
      profile_page_path: '/about-us/melissa-kruger',
      image_alt: 'Melissa Kruger author at playcasino.co.za',
      image: 'melissa-kruger.png',
    },
    relation: {
      ...card.relation,
      game_provider: {
        name: 'NetEnt',
        path: 'netent-casinos',
      },
    },
  },
  translations: {
    play_now_slots: 'Play Slots LANG',
  },
  storybookImage: gameCardBgThumb,
  page: {
    reading_time: '5', // Add the reading_time value here (replace '5 mins' with the actual value)
  },
};
