import { Box, Container } from '@mui/material';
import { ThemeProvider } from '../Theme';
import { ThemeModeToggle } from '../Config';

export { default as Basic } from './demo/basic';
export { default as HtmlValueAndName } from './demo/html-value-and-name';

export default {
  title: 'Data Display/Metric',
  parameters: {
    docs: {
      description: {
        component: 'The Metric component is usually used to display statistics on dashboard pages.',
      },
    },
  },
  decorators: [
    (StoryFn) => (
      <ThemeProvider prefer="system">
        <Container>
          <Box sx={{ mb: 2 }}>
            <ThemeModeToggle />
          </Box>
          <StoryFn />
        </Container>
      </ThemeProvider>
    ),
  ],
};
