import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Divider } from '@fluentui-react-native/divider';
import { Stack } from '@fluentui-react-native/stack';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { globalTokens } from '@fluentui-react-native/theme-tokens';
import { commonTestStyles } from '../Common/styles';
const CustomizedText = Text.customize({
    textAlign: 'right',
    fontSize: 'caption',
    fontWeight: 'bold',
    paddingVertical: 100,
});
const mobileDividerstyles = StyleSheet.create({
    container: { marginVertical: 20, display: 'flex', height: 20, justifyContent: 'space-between' },
});
const RedDivider = Divider.customize({ lineColor: 'red' });
const GreenThickDivider = Divider.customize({ lineColor: 'green', thickness: globalTokens.stroke.width30 });
export const MobileDividers = () => (React.createElement(Stack, { style: commonTestStyles.section },
    React.createElement(View, { style: mobileDividerstyles.container },
        React.createElement(Divider, { insetSize: 0 }),
        React.createElement(CustomizedText, null, "Inset : 0")),
    React.createElement(View, { style: mobileDividerstyles.container },
        React.createElement(Divider, { insetSize: 16 }),
        React.createElement(CustomizedText, null, "Inset : 16")),
    React.createElement(View, { style: mobileDividerstyles.container },
        React.createElement(Divider, { insetSize: 56 }),
        React.createElement(CustomizedText, null, "Inset : 56")),
    React.createElement(View, { style: mobileDividerstyles.container },
        React.createElement(Divider, { insetSize: 68 }),
        React.createElement(CustomizedText, null, "Inset : 68")),
    React.createElement(View, { style: mobileDividerstyles.container },
        React.createElement(Divider, { insetSize: 72 }),
        React.createElement(CustomizedText, null, "Inset : 72")),
    React.createElement(View, { style: mobileDividerstyles.container },
        React.createElement(Divider, { insetSize: 108 }),
        React.createElement(CustomizedText, null, "Inset : 108"))));
export const CustomisedMobileDividers = () => (React.createElement(Stack, { style: commonTestStyles.section },
    React.createElement(View, { style: mobileDividerstyles.container },
        React.createElement(RedDivider, null),
        React.createElement(CustomizedText, null, "Inset : 0 | color : red")),
    React.createElement(View, { style: mobileDividerstyles.container },
        React.createElement(GreenThickDivider, { insetSize: 56 }),
        React.createElement(CustomizedText, null, "Inset : 56 | color : green | thickness: width30"))));
//# sourceMappingURL=MobileDividerTest.js.map