/**
 * inherit: true
 * defaultShowCode: true
 */
import { Divider, Typography } from 'antd';
import { useThemeMode } from 'antd-style';
import { Flexbox } from 'react-layout-kit';
const { Text } = Typography;

export default () => {
  const { themeMode, appearance, browserPrefers } = useThemeMode();

  return (
    <Flexbox horizontal align={'center'}>
      <Text type={'secondary'}>Theme Mode:</Text>
      {themeMode}
      <Divider type={'vertical'} />
      <Text type={'secondary'}>Appearance Mode:</Text>
      {appearance}
      <Divider type={'vertical'} />
      <Text type={'secondary'}>Browser Appearance:</Text>
      {browserPrefers}
    </Flexbox>
  );
};

useThemeMode: () => ThemeContextState;