import {
    View,
    Text,
    ScrollView,
    Image,
    Dimensions,
    Pressable
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';
import { PreviousPageBlackSvg, TickLogoSvg } from '../global/SVG';
import { router } from 'expo-router';

const AddVehicleSuccessfulPageComponent = () => {
    const { height: deviceHeight, width: deviceWidth } =
        Dimensions.get('window');
    return (
        <SafeAreaView className="flex-1 bg-white">
            <ScrollView
                className="flex-1 mx-[5%]"
                showsVerticalScrollIndicator={false}
            >
                <View style={{ marginTop: 25, flex: 1 }}>
                    <Pressable
                        className="self-start"
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/accountMainPage');
                            }
                        }}
                    >
                        <PreviousPageBlackSvg />
                    </Pressable>
                    <View className="flex-row items-center mt-6">
                        <TickLogoSvg />
                        <Text className="text-3xl pl-2">新增完成</Text>
                    </View>
                    <View className="items-center pt-4 justify-center">
                        <View className="items-center ">
                            <Image
                                source={require('../../assets/car.png')}
                                resizeMode="contain"
                                style={{
                                    width: deviceWidth * 0.8,
                                    height: deviceHeight * 0.25
                                }}
                            />
                        </View>

                        <Text className="text-3xl font-light pb-4">
                            TESLA Model 3
                        </Text>
                        <Text className="text-lg font-light pb-4">
                            已加入我的車輛裡
                        </Text>
                    </View>

                    <NormalButton
                        title={
                            <Text style={{ color: '#fff', fontSize: 20 }}>
                                返回首頁
                            </Text>
                        }
                        onPress={() => {
                            router.replace('mainPage');
                        }}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default AddVehicleSuccessfulPageComponent;