crazycharge-app/component/global/testingCar.tsx

// interface CarBrand {
//     name: string;
//     logo?: any; // This would be the require() statement for the logo image
// }

// interface AlphabetSection {
//     letter: string;
//     brands: CarBrand[];
// }
// const carBrands: AlphabetSection[] = [
//     {
//         letter: 'A',
//         brands: [
//             { name: 'Audi', logo: require('../../assets/audi.png') },
//             { name: 'Acura', logo: require('../../assets/acura.png') }
//         ]
//     },
//     {
//         letter: 'B',
//         brands: [
//             { name: 'BMW', logo: require('../../assets/bmw1.png') },
//             { name: 'BYD', logo: require('../../assets/byd.png') }
//         ]
//     },
//     {
//         letter: 'C',
//         brands: [
//             { name: 'Chevrolet', logo: require('../../assets/chevrolet1.png') },
//             { name: 'Cadillac', logo: require('../../assets/cadillac1.png') }
//         ]
//     },
//     {
//         letter: 'F',
//         brands: [
//             { name: 'Ford', logo: require('../../assets/ford.png') },
//             { name: 'Fiat', logo: require('../../assets/fiat.png') }
//         ]
//     },
//     {
//         letter: 'G',
//         brands: [{ name: 'Genesis', logo: require('../../assets/genesis.png') }]
//     },
//     {
//         letter: 'H',
//         brands: [
//             { name: 'Honda', logo: require('../../assets/honda.png') },
//             { name: 'Hyundai', logo: require('../../assets/hyundai.png') }
//         ]
//     },
//     {
//         letter: 'J',
//         brands: [{ name: 'Jaguar', logo: require('../../assets/jaguar.png') }]
//     },
//     {
//         letter: 'K',
//         brands: [{ name: 'Kia', logo: require('../../assets/kia.png') }]
//     },

//     {
//         letter: 'M',
//         brands: [
//             { name: 'Mercedes-Benz', logo: require('../../assets/benz.png') },
//             { name: 'Mini', logo: require('../../assets/mini.png') },
//             { name: 'Mazda', logo: require('../../assets/mazda.png') }
//         ]
//     },
//     {
//         letter: 'N',
//         brands: [{ name: 'Nissan', logo: require('../../assets/nissan.png') }]
//     },
//     {
//         letter: 'P',
//         brands: [{ name: 'Porsche', logo: require('../../assets/porsche.png') }]
//     },

//     {
//         letter: 'S',
//         brands: [{ name: 'Subaru', logo: require('../../assets/subaru.png') }]
//     },
//     {
//         letter: 'T',
//         brands: [
//             { name: 'Tesla', logo: require('../../assets/tesla.png') },
//             { name: 'Toyota', logo: require('../../assets/toyota.png') }
//         ]
//     },
//     {
//         letter: 'V',
//         brands: [
//             { name: 'Volkswagen', logo: require('../../assets/volkswagen.png') },
//             { name: 'Volvo', logo: require('../../assets/volvo.png') }
//         ]
//     }
// ];

// import React, { useEffect } from 'react';
// import { View, Text, Image, Pressable, StyleSheet, SafeAreaView, 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';

// const CarBrandSelector = () => {
//     const { vehicleBrand, vehicleModel, licensePlate, setVehicleBrand, setVehicleModel, setLicensePlate } =
//         useVehicleStore();

//     useEffect(() => {
//         console.log('vehicleBrand in zustand', vehicleBrand);
//     }, [vehicleBrand]);
//     const renderBrandItem = ({ item: brand }: { item: CarBrand }) => (
//         <Pressable
//             style={styles.brandItem}
//             onPress={() => {
//                 setVehicleBrand(brand.name);
//                 console.log(brand.name);
//             }}
//         >
//             <Image source={brand.logo} style={styles.logo} resizeMode="contain" />
//             <Text style={styles.brandName}>{brand.name}</Text>
//         </Pressable>
//     );

//     const renderAlphabetSection = ({ item: section }: { item: AlphabetSection }) => (
//         <View>
//             <View style={styles.letterHeader} className="h-9">
//                 <Text style={styles.letterText}>{section.letter}</Text>
//             </View>
//             <View style={styles.brandRow}>{section.brands.map((brand) => renderBrandItem({ item: brand }))}</View>
//         </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
//                         estimatedItemSize={100}
//                         data={carBrands}
//                         renderItem={renderAlphabetSection}
//                         keyExtractor={(item) => item.letter}
//                     />
//                 </View>
//             </ScrollView>
//         </SafeAreaView>
//     );
// };

// const styles = StyleSheet.create({
//     letterHeader: {
//         backgroundColor: '#E3F2F8',
//         padding: 10,
//         marginVertical: 10
//     },
//     letterText: {
//         color: '#02677D',
//         fontSize: 14,
//         fontWeight: 'bold'
//     },
//     brandRow: {
//         flexDirection: 'row',
//         flexWrap: 'wrap'
//     },
//     brandItem: {
//         width: '33.33%',
//         alignItems: 'center',
//         padding: 10
//     },
//     logo: {
//         width: 80,
//         height: 80
//     },
//     brandName: {
//         marginTop: 5,
//         textAlign: 'center'
//     }
// });

// export default CarBrandSelector;