import { lorem10, lorem5 } from '../../test-utils';
import { InlinePrompt } from './InlinePrompt';
import { CardWise, Rewards } from '@transferwise/icons';

export default {
  title: 'Internal/InlinePrompt',
  component: InlinePrompt,
};

export const AllVariants = () => {
  return (
    <div
      style={{
        display: 'grid',
        gridAutoFlow: 'row',
        rowGap: 'var(--size-12)',
        justifyItems: 'start',
        width: 'fit-content',
      }}
    >
      <InlinePrompt sentiment="positive">{lorem5}</InlinePrompt>
      <InlinePrompt media={<Rewards />} sentiment="positive">
        {lorem10}
      </InlinePrompt>
      <InlinePrompt sentiment="negative">{lorem5}</InlinePrompt>
      <InlinePrompt sentiment="negative">{lorem10}</InlinePrompt>
      <InlinePrompt sentiment="neutral">{lorem5}</InlinePrompt>
      <InlinePrompt sentiment="neutral">{lorem10}</InlinePrompt>
      <InlinePrompt sentiment="warning">{lorem5}</InlinePrompt>
      <InlinePrompt sentiment="warning">{lorem10}</InlinePrompt>
      <InlinePrompt sentiment="proposition">{lorem5}</InlinePrompt>
      <InlinePrompt sentiment="proposition">{lorem10}</InlinePrompt>
      <InlinePrompt sentiment="proposition" media={<CardWise />}>
        {lorem10}
      </InlinePrompt>
      <InlinePrompt>{lorem5}</InlinePrompt>
    </div>
  );
};
