import * as React from 'react';
import {View, StyleSheet, SafeAreaView, ScrollView,Button, StatusBar, Text} from 'react-native';
import { useState } from 'react';
import InputField from '../common/InputField';
import ButtonComp from '../common/Button';

const EditCheckInSearch = () => {
    const [form, setForm] = useState({
        Child_ID: '',
        month: '',
    });
    return (
        <SafeAreaView style={styles.container}>
            <StatusBar barStyle="dark-content" />
            <View style={styles.header}>
                <Text style={styles.headerText}>Edit Check In</Text>
            </View>
            <View style={styles.labelContainer}>    
                <View style={styles.studentLabelContainer}>
                    <Text style={styles.studentLabel}>Child ID</Text>
                    <InputField
                        value={form.Child_ID}
                        handleChange={(text) => setForm({ ...form, Child_ID: text })}
                        placeHolder='Enter your Student ID'
                        keyboardType='numeric'
                        containerStyle={styles.inputContainer}
                        inputStyle={styles.inputField}
                    />
                </View>
                <View style={styles.studentLabelContainer}>
                    <Text style={styles.studentLabel}>Month</Text>
                    <InputField
                        value={form.month}
                        handleChange={(text) => setForm({ ...form, month: text })}
                        placeHolder='Enter the month'
                        keyboardType='numeric'
                        containerStyle={styles.inputContainer}
                        inputStyle={styles.inputField}
                    />
                </View>
                <View style={styles.searchButtonContainer}>
                    <ButtonComp title="Search" onPress={() => {}} buttonStyle={styles.searchButton} />
                </View>
            </View>
            <ScrollView>
                
            </ScrollView>
        </SafeAreaView>
    )
}

export default EditCheckInSearch;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        borderRadius: 20,
        shadowColor: "#000",
        shadowOffset: {
            width: 4,
            height: 0,
        },
        shadowOpacity: 0.15,
        shadowRadius: 5,
        elevation: 6,
        flexDirection: 'column',
        justifyContent: 'flex-start',

    },
    labelContainer:{
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    studentLabelContainer:{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
    },
    inputContainer: {
        flex:1,
        width: 300,
    },
    searchButtonContainer:{
    },
    searchButton:{
        height: 42,
        width: 141,
    },
    header: {
        height: 50,
        justifyContent: 'center',
        paddingHorizontal: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#E0E0E0',
        backgroundColor: 'white',
    },
    headerText: {
        fontSize: 20,
        fontWeight: 'bold',
    },
    inputContainer: {
        width: 150, // or whatever width you want
        marginBottom: 10,
    },
    inputField: {
        height: 42,
        backgroundColor: '#F5F5F5',
        borderRadius: 12,
        paddingHorizontal: 15,
        paddingVertical: 12,
        borderWidth: 0,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.05,
        shadowRadius: 2,
        elevation: 1,
    },
});

heres the input field component

import { View, TextInput, ViewStyle, StyleProp, TextStyle } from 'react-native'
import React from 'react'

interface InputFieldProps {
    value: string;
    handleChange: (text: string) => void;
    placeHolder: string;
    keyboardType: 'default' | 'numeric'
    containerStyle?: StyleProp<ViewStyle>
    inputStyle?: StyleProp<TextStyle>
}

const FormField = ({ value, handleChange, placeHolder, keyboardType, containerStyle, inputStyle }: InputFieldProps) => {
    return (
        <View style={containerStyle}>
            <TextInput
                style={inputStyle}
                value={value}
                onChangeText={handleChange}
                placeholder={placeHolder}
                keyboardType={keyboardType}
                placeholderTextColor="#999"
            />
        </View>
    )
}

export default FormField

can you tell me why when i set a width for the input container, the input field itself doesnt shrink