import { View, Text, StyleProp, ViewStyle } from 'react-native';
import React from 'react';
import { convertToHKTime } from '../../util/lib';

//this is a reuseable component "其他資訊" 灰色格仔 on Charging Page
interface OtherInformationBoxProps {
    extendedStyle?: StyleProp<ViewStyle>;
    actual_start_time?: any;
}
const OtherInformationBox: React.FC<OtherInformationBoxProps> = ({ extendedStyle, actual_start_time }) => {
const formattedActualStartTime = convertToHKTime(actual_start_time).hkTime;



    
    return (
        <View className="border-slate-300 rounded-2xl justify-center pl-4" style={[{ borderWidth: 1 }, extendedStyle]}>
            <Text className="text-lg pb-2">其他資訊</Text>
            <View className="flex-row">
                <View className="flex-1 flex-column">
                    <Text className="text-base color-[#888888]">開始時間</Text>
                    <Text className="text-base">{formattedActualStartTime}</Text>
                </View>
                <View className="flex-1 flex-column">
                    <Text className="text-base color-[#888888]">充電座</Text>
                    <Text className="text-base">A104</Text>
                </View>
            </View>
        </View>
    );
};
export default OtherInformationBox;