import { asp as g } from "@asp/asp";
import type { FC } from "react";
import {
	ActivityIndicator,
	Text,
	type TextProps,
	TouchableOpacity,
	type TouchableOpacityProps,
} from "react-native";

const DEFAULT_HEIGHT = 50;

type ContainerProps = TouchableOpacityProps & {
	isLoading?: boolean;
};

export const Container: FC<ContainerProps> = ({ children, style, isLoading, onPress, ...rest }) => {
	return (
		<TouchableOpacity
			onPress={onPress}
			style={[
				g.p_md,
				g.rounded_xs,
				g.align_center,
				g.justify_center,
				{ height: DEFAULT_HEIGHT, backgroundColor: "#03875b" },
				style,
			]}
			{...rest}
		>
			{isLoading ? <ActivityIndicator /> : children}
		</TouchableOpacity>
	);
};

export const Label: FC<TextProps> = ({ children, style, ...rest }) => {
	return (
		<Text style={[g.font_bold, { color: "white" }, style]} {...rest}>
			{children}
		</Text>
	);
};