crazycharge-app/component/global/testingCar2.tsx

// interface CarModel {
//     name: string;
//     year: number;
// }

// interface CarModelSection {
//     category: string;
//     models: CarModel[];
// }
// const carModels: CarModelSection[] = [
//     {
//         category: 'SUV',
//         models: [
//             { name: 'X1', year: 2023 },
//             { name: 'X3', year: 2023 },
//             { name: 'X5', year: 2023 }
//         ]
//     },
//     {
//         category: 'Sedan',
//         models: [
//             { name: '3 Series', year: 2023 },
//             { name: '5 Series', year: 2023 },
//             { name: '7 Series', year: 2023 }
//         ]
//     },
//     {
//         category: 'Electric',
//         models: [
//             { name: 'i3', year: 2023 },
//             { name: 'i4', year: 2023 },
//             { name: 'iX', year: 2023 }
//         ]
//     }
// ];

// import React, { useEffect } from 'react';
// import { View, Text, Image, Pressable, StyleSheet, ScrollView } from 'react-native';
// import useVehicleStore from '../../providers/vehicle_store';
// import { FlashList } from '@shopify/flash-list';
// import { router } from 'expo-router';
// import { PreviousPageBlackSvg } from './SVG';
// import { SafeAreaView } from 'react-native-safe-area-context';
// const CarModelSelector = ({ brandName }: { brandName: string }) => {
//     const renderModelItem = ({ item: model }: { item: CarModel }) => (
//         <Pressable style={styles.modelItem} onPress={() => console.log(model.name)}>
//             <Text style={styles.modelName}>{model.name}</Text>
//             <Text style={styles.modelYear}>{model.year}</Text>
//         </Pressable>
//     );

//     const renderCategorySection = ({ item: section }: { item: CarModelSection }) => (
//         <View>
//             <View style={styles.categoryHeader}>
//                 <Text style={styles.categoryText}>{section.category}</Text>
//             </View>
//             <FlashList
//                 data={section.models}
//                 renderItem={renderModelItem}
//                 keyExtractor={(item) => item.name}
//                 horizontal={true}
//                 showsHorizontalScrollIndicator={false}
//             />
//         </View>
//     );

//     return (
//         <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
//             <ScrollView showsVerticalScrollIndicator={false} className="flex-1 mx-[5%]">
//                 <View style={{ marginTop: 25 }}>
//                     <Pressable
//                         className="self-start"
//                         onPress={() => {
//                             if (router.canGoBack()) {
//                                 router.back();
//                             } else {
//                                 router.replace('/accountMainPage');
//                             }
//                         }}
//                     >
//                         <PreviousPageBlackSvg />
//                     </Pressable>
//                     <Text
//                         style={{
//                             fontSize: 30,
//                             marginTop: 25,
//                             marginBottom: 10
//                         }}
//                     >
//                         選擇車輛型號
//                     </Text>
//                 </View>
//                 <View className="flex-1">
//                     <FlashList
//                         data={carModels}
//                         renderItem={renderCategorySection}
//                         keyExtractor={(item) => item.category}
//                     />
//                 </View>
//             </ScrollView>
//         </SafeAreaView>
//     );
// };

// const styles = StyleSheet.create({
//     container: {
//         flex: 1,
//         padding: 10
//     },
//     brandTitle: {
//         fontSize: 24,
//         fontWeight: 'bold',
//         marginBottom: 20
//     },
//     categoryHeader: {
//         backgroundColor: '#E3F2F8',
//         padding: 10,
//         marginVertical: 10
//     },
//     categoryText: {
//         color: '#02677D',
//         fontSize: 18,
//         fontWeight: 'bold'
//     },
//     modelItem: {
//         width: 150,
//         height: 100,
//         justifyContent: 'center',
//         alignItems: 'center',
//         backgroundColor: '#F0F0F0',
//         margin: 5,
//         borderRadius: 10
//     },
//     modelName: {
//         fontSize: 16,
//         fontWeight: 'bold'
//     },
//     modelYear: {
//         fontSize: 14,
//         color: '#666'
//     }
// });

// export default CarModelSelector;