water-sys/app/screens/ShippingDetailsSection.tsx

import React from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet, TextInput, ImageBackground } from 'react-native';

export const ShippingDetailsSection = () => {
  return (
    <View style={styles.container}>
      <ImageBackground 
        source={require('../../assets/img/image_f67fe9bc.jpeg')}
        style={styles.backgroundImage}
      >
        <View style={styles.contentContainer}>
          <View style={styles.timeShippingSection}>
            <View style={styles.shippingCostContainer}>
              <View style={styles.svgContainer}>
                {/* Back arrow icon */}
                {/* <Image 
                  source={require('./assets/back_icon.png')}
                  style={{width: 18, height: 18, tintColor: '#ffffff'}}
                /> */}
              </View>
              <Text style={styles.shippingCostLabelTextStyle}>Frais d'expédition</Text>
            </View>
          </View>

          {/* Calculator Form */}
          <View style={styles.shippingCalculatorContainer}>
            <View style={styles.flexColumnCenteredWithSelect}>
              {/* Shipping Method Selection */}
              <View style={styles.shippingMethodContainer}>
                {/* Maritime Option */}
                <TouchableOpacity style={styles.maritimeInfoBox}>
                  <View style={styles.svgContainer1}>
                  <Image 
                      source={require('../../assets/img/海运 (1) 1.png')}
                      style={{width: 24, height: 24, tintColor: '#fff'}}
                    />
                  </View>
                  <Text style={styles.maritimeHeadingStyle}>Par voie maritime</Text>
                </TouchableOpacity>

                {/* Airway Option */}
                <TouchableOpacity style={styles.airwayInfoContainer}>
                  <View style={styles.svgContainer2}>
                    <Image 
                      source={require('../../assets/img/空运 1.png')}
                      style={{width: 24, height: 24, tintColor: '#747474'}}
                    />
                  </View>
                  <Text style={styles.flightModeLabel}>Par voie aérienne</Text>
                </TouchableOpacity>
              </View>

              {/* Parcel Volume Form */}
              <View style={styles.parcelVolumeFormContainer}>
                {/* Dropdown Select - Replace with actual picker component */}
                <View style={styles.optionContainer}>
                  <Text style={styles.pingfangTextSelect}>Select an option</Text>
                  <View style={styles.iconSelectDropdown}>
                    {/* <Image 
                      source={require('./assets/dropdown_icon.png')}
                      style={{width: 24, height: 24}}
                    /> */}
                  </View>
                </View>

                <View style={styles.parcelVolumeContainer}>
                  <Text style={styles.parcelVolumeLabel}>Volume de colis</Text>
                  <View style={styles.volumeInputContainer}>
                    <Text style={styles.volumePromptTextStyle}>Veuillez saisir le volume du colis</Text>
                    <Text style={styles.volumeLabel}>m³</Text>
                  </View>
                </View>
              </View>

              {/* Submit Button */}
              <TouchableOpacity style={styles.primaryButton}>
                <Text style={{color: 'white', fontSize: 16, fontFamily: 'PingFang SC', fontWeight: '600'}}>
                  Calculer les frais
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flex: 1,
  },
  backgroundImage: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
  contentContainer: {
    flex: 1,
    padding: 20,
  },
  timeShippingSection: {
    flexDirection: 'column',
  },
  timeAndImageContainer: {
    flexDirection: 'row',
    gap: 8,
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 36,
  },
  timeDisplay: {
    width: 42,
    fontSize: 17,
    fontFamily: 'SF Pro',
    fontWeight: '600',
    color: 'white',
    textAlign: 'center',
  },
  timeImageContainer: {
    width: 154,
    height: 54,
  },
  shippingCostContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 20,
  },
  svgContainer: {
    width: 18,
    height: 18,
  },
  shippingCostLabelTextStyle: {
    marginLeft: 9,
    fontSize: 20,
    lineHeight: 22,
    fontFamily: 'Microsoft YaHei UI',
    fontWeight: '700',
    color: 'white',
    textAlign: 'center',
    textTransform: 'capitalize',
  },
  shippingCalculatorContainer: {
    marginTop: 20,
    paddingTop: 18,
    paddingRight: 20,
    paddingBottom: 28,
    paddingLeft: 20,
    backgroundColor: 'white',
    borderRadius: 5,
    justifyContent: 'center',
  },
  flexColumnCenteredWithSelect: {
    flexDirection: 'column',
    justifyContent: 'center',
  },
  shippingMethodContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: 80,
    paddingRight: 10,
    paddingLeft: 10,
    backgroundColor: '#f2f6ff',
    borderRadius: 5,
  },
  maritimeInfoBox: {
    height: 60,
    paddingRight: 19,
    paddingLeft: 20,
    backgroundColor: '#005EE4',
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  svgContainer1: {
    width: 32,
    height: 32,
  },
  maritimeHeadingStyle: {
    marginTop: -5,
    fontSize: 14,
    fontFamily: 'Segoe UI',
    fontWeight: '700',
    color: 'white',
    textTransform: 'capitalize',
  },
  airwayInfoContainer: {
    height: 60,
    paddingRight: 24,
    paddingLeft: 25,
    marginLeft: 10,
    backgroundColor: 'white',
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  svgContainer2: {
    width: 24,
    height: 24,
  },
  flightModeLabel: {
    marginTop: -2,
    fontSize: 14,
    fontFamily: 'Segoe UI',
    fontWeight: '400',
    color: '#747474',
    textTransform: 'capitalize',
  },
  parcelVolumeFormContainer: {
    marginTop: 16,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#dbdce0',
  },
  optionContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: 60,
    paddingRight: 6,
    paddingLeft: 8,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#dbdce0',
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
  },
  pingfangTextSelect: {
    fontSize: 12,
    fontFamily: 'PingFang SC',
    fontWeight: '500',
    color: '#646472',
  },
  iconSelectDropdown: {
    width: 24,
    height: 24,
    marginLeft: 10,
  },
  parcelVolumeContainer: {
    width: '100%',
    paddingTop: 6,
    paddingRight: 8,
    paddingBottom: 10,
    paddingLeft: 8,
    marginTop: -1,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#dbdce0',
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
  },
  parcelVolumeLabel: {
    fontSize: 12,
    fontFamily: 'PingFang SC',
    fontWeight: '600',
    color: '#646472',
  },
  volumeInputContainer: {
    flexDirection: 'row',
    gap: 8,
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
  },
  volumePromptTextStyle: {
    fontSize: 16,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
    fontWeight: '400',
    color: '#807e7e',
  },
  volumeLabel: {
    fontSize: 16,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
    fontWeight: '600',
    color: '#1c284e',
  },
  primaryButton: {
    minWidth: 350,
    height: 50,
    marginTop: 34,
    backgroundColor: '#002fa7',
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
  },
});