import { FastFlag } from '@transferwise/icons';
import Button from '../button';
import AvatarView from '../avatarView';
import LegacyListItem, { type LegacyListItemProps } from '.';
import List from '../list';

export default {
  component: LegacyListItem,
  tags: ['!autodocs', '!manifest', 'deprecated'],
  title: 'Content/LegacyListItem/Tests',
};

export const LongText = () => {
  const sharedProps: Partial<LegacyListItemProps> = {
    media: <AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />,
    action: (
      <Button v2 size="sm" onClick={() => {}}>
        Action
      </Button>
    ),
  };

  return (
    <div style={{ width: '35rem' }}>
      <List>
        <LegacyListItem
          {...sharedProps}
          title="Default behaviour"
          value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
        />

        <LegacyListItem
          {...sharedProps}
          title="Wrapping the long word with a 'span.text-word-break'"
          value={
            <>
              {'This is a test of a a very long word dontbreakme dontbreakme dontbreakme '}
              <span className="text-word-break">
                breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
              </span>
              {' word.'}
            </>
          }
        />

        <LegacyListItem
          {...sharedProps}
          title="Using '&amp;shy;' HTML entitty"
          value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
        />
      </List>
    </div>
  );
};