import { View, Text, Pressable, Dimensions, StyleSheet } from 'react-native';

import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { CrossLogoSvg } from '../global/SVG';
import CouponTabViewComponent from '../global/couponTabView';
import DisplayedOnlyCouponTabView from '../global/displayedOnlyCouponTabView';

const CouponPageComponent = () => {
    const screenHeight = Dimensions.get('window').height;

    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
            <View style={{ minHeight: screenHeight, flex: 1 }} className="mx-[5%]">
                <View style={{ marginTop: 25 }}>
                    <Pressable
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/optionPage');
                            }
                        }}
                    >
                        <CrossLogoSvg />
                    </Pressable>
                    <Text style={{ fontSize: 45, marginVertical: 25 }}>優惠券</Text>
                </View>
                <View className="flex-1">
                    <DisplayedOnlyCouponTabView titles={['可用優惠券', '已使用/失效']} />
                </View>
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    floatingButton: {
        elevation: 5,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84
    }
});

export default CouponPageComponent;