Newscout_Mobile/src/components/molecules/Buttons/ThemeTextButton.js

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import fonts from '../../../constants/fonts';
import colors from '../../../constants/colors';
import Button from '../../atoms/Buttons/Button';


const ThemedTextButton = ({ theme, onPress, title, titleStyle, buttonStyle}) => {

    let style = {};
    switch (theme) {
        case 'primary-outline':
            style = {

                buttonStyle: {
                    backgroundColor: colors().dominant,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center',
                    borderColor: colors().primaryColor,
                    borderRadius: 6,
                    borderWidth: 1
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors().secondaryColor,
                }
            }
            break;
        case 'secondary-outline':
            style = {
                buttonStyle: {
                    backgroundColor: colors().dominant,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center',
                    borderColor: colors().secondaryColor,
                    borderRadius: 6,
                    borderWidth: 1
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors().primaryColor,
                }
            }
            break;
        case 'secondary-contained':
            style = {
                buttonStyle: {
                    backgroundColor: colors().secondaryColor,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center',
                    borderRadius: 6,
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors().white,
                }

            }
            break;
        case "white":
            style = {
                buttonStyle: {
                    backgroundColor: colors().white_variant,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center',
                    borderRadius: 6,
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors().black,
                }

            }
            break
        case "black":
            style = {
                buttonStyle: {
                    backgroundColor: colors().black_variant,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center'
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors().white,
                }

            }
            break
        case 'primary-contained':
        default:
            style = {
                buttonStyle: {
                    backgroundColor: colors().primaryColor,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center'
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors().white,
                }

            }
            break;
    }

    const styles = StyleSheet.create(style)

    return (
        <Button
            onPress={onPress}
            style={[styles.buttonStyle, buttonStyle]}
        >
            <Text style={[styles.buttonTextStyle, titleStyle]}>
                {title}
            </Text>
        </Button>
    )
}

export default ThemedTextButton