import { StoryFn } from '@storybook/react';

import Link from '../link';

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

export default {
  component: InstructionsList,
  title: 'Typography/InstructionsList',
};

export const Template: StoryFn = (args: InstructionsListProps) => {
  return (
    <>
      <InstructionsList
        className={args.className}
        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']}
        sort={args.sort}
      />
      <hr />
      <InstructionsList
        dos={[
          { content: 'Multiple currencies', 'aria-label': 'Supports multiple currencies' },
          { content: 'Existing recipients', 'aria-label': 'Supports existing recipients' },
        ]}
        donts={[
          { content: 'Create recipients', 'aria-label': "Doesn't support creating recipients" },
          { content: 'Edit recipients', 'aria-label': "Doesn't support editing recipients" },
        ]}
        sort={args.sort}
      />
    </>
  );
};

export const Basic = {
  render: Template,
  args: {
    sort: 'dosFirst',
  },
};
