import { Typography } from '../common/propsValues/typography';
import { lorem1000 } from '../test-utils';

import Title from './Title';

export default {
  component: Title,
  title: 'Typography/Title/Tests',
  tags: ['!autodocs', '!manifest'],
  args: {
    children: lorem1000.replaceAll(' ', ''),
  },
  argTypes: {
    as: {
      table: {
        disable: true,
      },
    },
    type: {
      table: {
        disable: true,
      },
    },
  },
};

export const Hyphenation = ({ children }: { children: string }) => {
  return (
    <Title type={Typography.TITLE_SCREEN} style={{ maxWidth: '600px', wordWrap: 'break-word' }}>
      {` ${children}`}
    </Title>
  );
};