/* eslint-disable react/destructuring-assignment */
import React from 'react';
import TemplateOne from '.';
import Verify from '~images/icons/verify';

export default {
  title: 'Theme/Layout/Header/Games/Template Two',
  component: TemplateOne,
  argTypes: {
    headerBonus: {
      control: 'boolean',
    },
  },
};

const Template = (args) => {
  const { headerBonus, ...rest } = args;

  const filteredModules = headerBonus ? args.page.sections.header.modules : [];

  return (
    <TemplateOne
      {...rest}
      page={{
        ...args.page,
        relation: {
          logo: { filename: '1651670485/davincis-gold-casino-logo.png' },
        },
        sections: {
          ...args.page.sections,
          header: { ...args.page.sections.header, modules: filteredModules },
        },
      }}
    />
  );
};

export const Default = Template.bind({});
Default.args = {
  page: {
    title: 'Game slot',
    relation: {
      third_rating: 3.7,
      first_rating: 4.3,
      rtp: 30,
      average_rating: 4.9,
      thumbnail_filename_object: {
        filename: 'holiday-season-game-thumbnail.jpeg',
      },
    },
    sections: {
      header: {
        modules: [
          {
            name: 'bonus',
            value: {
              bonuses: {
                main: {
                  one_liner: '20 Free Spins No Deposit Bonus + 300% & 555 Spins Welcome Bonus',
                },
              },
              logo: {
                filename: '1651670485/davincis-gold-casino-logo.png',
              },
              links: { main: 'test' },
              status: 'active',
            },
          },
        ],
      },
    },
  },
  image: <Verify />,
  headerBonus: true,
};
