import { Meta, StoryObj } from '@storybook/react-webpack5';
import { ThemeProvider } from '@wise/components-theming';

import Button from '../../button';
import { lorem100 } from '../../test-utils';
import Display from '../../display';
import Logo from '../../logo';
import Body from '../../body';

export default {
  component: ThemeProvider,
  title: 'Other/ThemeProvider',
} satisfies Meta<typeof ThemeProvider>;

type Story = StoryObj<typeof ThemeProvider>;

export const PlatformTheme: Story = {
  render: () => (
    <ThemeProvider theme="platform">
      <Button>Button</Button>
    </ThemeProvider>
  ),
};

export const BusinessLandingPage: Story = {
  render: () => (
    <ThemeProvider theme="business">
      <Display type="display-large">Wise Business</Display>
      <Body type="body-large-bold">
        {lorem100}
      </Body>
      <ThemeProvider theme="business--forest-green">
        <Body type="body-large">
          {lorem100}
        </Body>
      </ThemeProvider>
      <Body type="body-large">
        {lorem100}
      </Body>
    </ThemeProvider>
  ),
};
