import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import Separator from './Separator'
const UiButton = ({
text = "Press",
style = {},
textStyle = {},
onPress = () => { },
// Button props
variant = "default" || "dark" || "red" || "teal" || "primary" || "outline" || "rounded",
hide = false,
hideText = false,
hideGap = false,
// Icon props
icon = null,
iconPosition = "left" || "right",
onIconPress = null,
iconStyle = {},
gap = 5
}) => {
const handleIconPress = () => {
if (onIconPress) {
onIconPress()
} else {
onPress()
}
}
const getStyle = (type) => {
return {
container: styles[`${type?.toLowerCase()}ButtonContainer`],
text: styles[`${type?.toLowerCase()}ButtonText`],
icon: styles[`${type?.toLowerCase()}Icon`]
}
}
return (
<TouchableOpacity
onPress={onPress}
style={[styles.default, getStyle(variant).container, style, hide && { display: "none" }]}
>
{(iconPosition === "left" && icon) && <>
<TouchableOpacity key="SameIcon" onPress={handleIconPress} style={[style.defaultIcon, getStyle(variant).icon, iconStyle]}>
{icon}
</TouchableOpacity>
{(!hideGap && !hideText) && <Separator width={gap} />}
</>}
{!hideText && <Text style={[styles.defaultText, getStyle(variant).text, textStyle]}>{text}</Text>}
{(iconPosition === "right" && icon) && <>
{(!hideGap && !hideText) && <Separator width={gap} />}
<TouchableOpacity key="SameIcon" onPress={handleIconPress} style={[style.defaultIcon, getStyle(variant).icon, iconStyle]}>
{icon}
</TouchableOpacity>
</>}
</TouchableOpacity >
)
}
export default UiButton
const styles = StyleSheet.create({
default: {
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 16,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
defaultText: {
fontFamily: "Poppins-Regular",
fontStyle: "normal",
textAlign: "center",
textAlignVertical: "center",
paddingTop: 2,
},
defaultIcon: {
flexDirection: "row",
alignItems: "center",
},
// Default button
buttonContainer: {
backgroundColor: '#000',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 16,
},
buttonText: {
color: '#fff',
},
// Primary button
primaryButtonContainer: {
borderRadius: 100,
backgroundColor: "#34F57C",
borderWidth: 1,
borderStyle: "solid",
borderColor: "#34F57C"
},
primaryButtonText: {
fontFamily: "Poppins-SemiBold",
color: "#0E0E0E",
fontSize: 16,
fontWeight: "600",
fontStyle: "normal",
lineHeight: 24,
},
// outline button
outlineButtonContainer: {
borderRadius: 100,
borderStyle: "solid",
borderWidth: 1,
borderColor: "rgba(169, 169, 169, 1.0)"
},
outlineButtonText: {
fontFamily: "Poppins-SemiBold",
color: "#FFFFFF",
fontSize: 16,
fontWeight: "600",
fontStyle: "normal",
lineHeight: 24,
},
// rounded button
roundedButtonContainer: {
paddingVertical: 0,
paddingHorizontal: 0,
aspectRatio: 1,
borderRadius: 100,
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
},
// Dark button
darkButtonContainer: {
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 16,
borderWidth: 1,
backgroundColor: '#000',
borderColor: "rgba(255,255,255,0.3)",
borderCurve: "circular"
},
darkButtonText: {
color: "white"
},
// Red button
redButtonContainer: {
backgroundColor: "rgba(207, 0, 15,1)",
},
redButtonText: {
color: "white"
},
// Teal button
tealButtonContainer: {
backgroundColor: "rgba(8, 143, 143,1)",
},
tealButtonText: {
color: "white"
}
});