import { Typography } from '../common/propsValues/typography';

import Title from './Title';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';

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

export const Sandbox = createSandboxStory({
  code: `<Title type="title-group">
  Group Title
</Title>`,
  scope: globalScope,
});

export const Basic = () => {
  return (
    <>
      <Title type={Typography.TITLE_SCREEN}>Screen Title</Title>
      <Title type={Typography.TITLE_SECTION} className="m-t-3">
        Section Title
      </Title>
      <Title type={Typography.TITLE_SUBSECTION} className="m-t-3">
        Subsection Title
      </Title>
      <Title type={Typography.TITLE_BODY} className="m-t-3">
        Body Title
      </Title>
      <Title type={Typography.TITLE_GROUP} className="m-t-3">
        Group Title
      </Title>
    </>
  );
};
