// src/components/CustomDropdown.js
import React from 'react';
import { StyleSheet } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';

const CustomDropdown = ({
    data = [],
    value,
    onChange,
    placeholder = '--Select--',
    containerStyle = {},
}) => {
    return (
        <Dropdown
            style={[styles.dropdown, containerStyle]}
            data={data}
            labelField="label"
            valueField="value"
            placeholder={placeholder}
            placeholderStyle={{ fontSize: 13, fontWeight: '500', color: 'gray' }}
            value={value}
            selectedTextStyle={{fontSize: 13, fontWeight: '500', color: '#000'}}
            itemTextStyle={{fontSize:13,color:'#000'}}
            onChange={onChange}
        />
    );
};

const styles = StyleSheet.create({
    dropdown: {
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        paddingHorizontal: 10,
        height: 45,
        marginBottom: 0, // ✅ no margin
        paddingBottom: 0, // ✅ no padding
    },
});

export default CustomDropdown;