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

const card = sampleOperatorCards.items[0];

export default {
  title: 'Theme/Modules/Cards/Game/Template Five',
  component: TemplateFive,
  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) => <TemplateFive {...args} />;
export const Default = Template.bind({});
Default.args = {
  // eslint-disable-next-line object-shorthand
  item: {
    ...card,
    banner: '',
    title: 'Wolf Gold',
    extra_fields: {
      operator: {
        name: 'Wildz',
        path: 'wildz-casino',
        bonuses: {
          main: {
            one_liner: '20 free spins + Not Shown Text',
          },
        },
      },
    },
    relation: {
      ...card.relation,
      game_provider: {
        name: 'Wildz',
        path: 'wildz-casino',
      },
    },
  },
  translations: {
    play_now_slots: 'Play Slots LANG',
  },
  storybookImage: gameCardBgThumb,
  storybookLogo: gameCardOperatorLogo,
};
