import { Home as HomeIcon } from '@transferwise/icons';
import { Status } from '../common';
import Summary, { type SummaryProps } from '.';

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

export const LongText = () => {
  const sharedProps: Partial<SummaryProps> = {
    action: {
      text: 'Change address',
      href: '#change-address',
      'aria-label': ' Click here to change address',
    },
    as: 'li',
    icon: <HomeIcon size={24} />,
    status: Status.NOT_DONE,
    info: {
      title: 'Title',
    },
  };
  return (
    <ul style={{ width: '34rem' }}>
      <Summary
        title="Default behaviour"
        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
        {...sharedProps}
      />

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

      <Summary
        title="Using '&amp;shy;' HTML entitty"
        description="This is a test of a a very long word dontbreakme dontbreakme 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."
        {...sharedProps}
      />
    </ul>
  );
};