import { useStyles } from 'react-native-unistyles'

const Component = ({ isPrimary, isDisabled }) => {
    const { styles } = useStyles(stylesheet, {
        color: !isDisabled,
        borderColor: isPrimary
        // you can also use strings
        // color: "true" | "false"
    })

    return (
        <View style={styles.container} />
    )
}

const stylesheet = createStyleSheet(theme => ({
    container: {
        // otter styles
        variants: {
            color: {
                true: {
                    backgroundColor: theme.colors.primary
                },
                false: {
                    backgroundColor: theme.colors.disabled
                },
                // you can still specify a default variant
                default: {
                    backgroundColor: theme.colors.barbie
                }
                // or other variants
                special: {
                    backgroundColor: theme.colors.special
                }
            },
            borderColor: {
                true: {
                    borderColor: theme.colors.primary
                }
                // you can also skip "false" here
            }
        }
    }
})