import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';

import Link from '../link';

import InstructionsList, { InstructionsListProps } from './InstructionsList';

export default {
  component: InstructionsList,
  title: 'Typography/InstructionsList',
  render: (args) => <InstructionsList {...args} />,
} satisfies Meta<typeof InstructionsList>;

type Story = StoryObj<typeof InstructionsList>;

export const Basic: Story = {
  args: {
    sort: 'dosFirst',
    dos: [
      'Do an initial money transfer',
      'Invite at least 3 friends',
      <span key="12">
        Paying extra{' '}
        <Link href="" type="link-large">
          hidden fees
        </Link>{' '}
        for transfers
      </span>,
    ],
    donts: ['Paying extra hidden fees for transfers', 'Use bad exchange rate'],
  },
};

export const WithNewLine: Story = {
  args: {
    sort: 'dosFirst',
    dos: [
      'Do an initial money transfer',
      'Invite at least 3 friends',
      'This do item has a newline:\nSecond line appears below',
    ],
    donts: [
      'Paying extra hidden fees for transfers',
      'Use bad exchange rate',
      'This dont item has a newline:\nSecond line appears below',
    ],
  },
};