import type { BoxProps, VariantProps } from "@shopify/restyle";
import type { Theme } from "@themes/Theme";
import { ActivityIndicator, TouchableOpacity } from "react-native";
import ButtonBase from "./bases/ButtonBase";
import Text from "./bases/Text";

type Props = BoxProps<Theme> &
	VariantProps<Theme, "buttonVariants"> &
	VariantProps<Theme, "textVariants", "textVariants"> & {
		label: string;
		onPress: () => void;
		isLoading?: boolean;
	};

const Button = ({ onPress, label, isLoading, textVariants, variant, ...rest }: Props) => {
	return (
		<TouchableOpacity onPress={onPress}>
			<ButtonBase
				variant={variant}
				justifyContent="center"
				alignItems="center"
				flexDirection={"row"}
				{...rest}
				gap={"m"}
			>
				{isLoading ? (
					<ActivityIndicator color="white" />
				) : (
					<Text variant={textVariants}>{label}</Text>
				)}
			</ButtonBase>
		</TouchableOpacity>
	);
};

export default Button;