import { containers } from "@styles/Commons";
import { useEffect } from "react";
import { Animated, Dimensions } from "react-native";
import Box from "./bases/Box";

type Props = { children: React.ReactNode };
const ContainerBorderTopCurved = ({ children }: Props) => {
	const animated = new Animated.Value(0);
	// biome-ignore lint/correctness/useExhaustiveDependencies: <we do not want animation to replay everytime this component rerender>
	useEffect(() => {
		Animated.spring(animated, {
			toValue: 1,
			useNativeDriver: true,
		}).start();
	}, []);

	return (
		<Animated.View
			style={[
				containers.containerFull,
				{
					transform: [
						{
							translateY: animated.interpolate({
								inputRange: [0, 1],
								outputRange: [Dimensions.get("window").height, 0],
							}),
						},
					],
				},
			]}
		>
			<Box
				backgroundColor={"white"}
				borderTopLeftRadius={30}
				borderTopRightRadius={30}
				style={containers.containerFull}
			>
				{children}
			</Box>
		</Animated.View>
	);
};

export default ContainerBorderTopCurved;