import { asp as g } from "@asp/asp";
import type { FC } from "react";
import {
	Text,
	TextInput,
	type TextInputProps,
	type TextProps,
	View,
	type ViewProps,
} from "react-native";

const DEFAULT_HEIGHT = 50;

export const Container: FC<ViewProps> = ({ children, style, ...rest }) => {
	return (
		<View style={[g.gap_md, style]} {...rest}>
			{children}
		</View>
	);
};

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

export const FieldContainer: FC<ViewProps> = ({ children, style, ...rest }) => {
	return (
		<View
			style={[
				g.p_md,
				g.gap_xs,
				g.rounded_xs,
				g.flex_row,
				{ backgroundColor: "#e8e8e9ff", height: DEFAULT_HEIGHT },
				style,
			]}
			{...rest}
		>
			{children}
		</View>
	);
};

export const Field: FC<TextInputProps & { ref?: React.Ref<TextInput> }> = ({
	style,
	ref,
	...props
}) => {
	return (
		<TextInput
			ref={ref}
			placeholderTextColor={"black"}
			style={[
				g.flex_1,
				g.rounded_xs,
				g.p_0,
				{
					color: "black",
				},

				style,
			]}
			{...props}
		/>
	);
};