import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import {
  ITutorialLesson,
  ITutorialStepperProps,
  TutorialStepper,
} from '../../../components/Tutorial/TutorialStepper';

import tutorialImg3 from '../../../assets/images/farming-plant-seed.png';
import tutorialImg1 from '../../../assets/images/sewer.png';
import tutorialImg2 from '../../../assets/images/shortcuts.png';

const meta: Meta = {
  title: 'UI/Steppers/TutorialStepper',
  component: TutorialStepper,
};

export default meta;

const Template: Story<ITutorialStepperProps> = () => {
  const lessons: ITutorialLesson[] = [
    {
      title: 'Sample Lesson 1',
      text: 'This is the first lesson',
      image: tutorialImg1,
    },
    {
      title: 'Sample Lesson 2',
      text: 'This is the second lesson',
      image: tutorialImg2,
    },
    {
      title: 'Body example',
      body: `<p>This is a body example with a <a href="https://google.com" target="_blank">link</a> and a <strong>bold</strong> text.
      </p>`,
      image: tutorialImg3,
    },
  ];

  return (
    <RPGUIRoot>
      <TutorialStepper
        lessons={lessons}
        onLessonFinish={() => {
          console.log('finished lesson!');
        }}
      />
    </RPGUIRoot>
  );
};

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

Default.args = {};
