import React from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { Picker as RNPicker } from '@react-native-picker/picker';
import { colors, spacing, typography, borderRadius } from '../lib/theme';

interface PickerProps {
  label?: string;
  value: string;
  options: { value: string; label: string }[];
  onValueChange: (value: string) => void;
  placeholder?: string;
}

export const Picker: React.FC<PickerProps> = ({
  label,
  value,
  options,
  onValueChange,
  placeholder,
}) => {
  return (
    <View style={styles.container}>
      {label && <Text style={styles.label}>{label}</Text>}
      <View style={styles.pickerContainer}>
        <RNPicker
          selectedValue={value}
          onValueChange={onValueChange}
          style={styles.picker}
          dropdownIconColor={colors.text}
          enabled={true}
        >
          {placeholder && (
            <RNPicker.Item
              label={placeholder}
              value=""
              color={colors.text}
            />
          )}
          {options.map(option => (
            <RNPicker.Item
              key={option.value}
              label={option.label}
              value={option.value}
              color={colors.text}
            />
          ))}
        </RNPicker>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginBottom: spacing.md,
  },
  label: {
    fontSize: typography.fontSize.sm,
    fontWeight: typography.fontWeight.medium,
    color: colors.text,
    marginBottom: spacing.xs,
  },
  pickerContainer: {
    borderWidth: 1,
    borderColor: colors.border,
    borderRadius: borderRadius.md,
    backgroundColor: colors.background,
    overflow: 'hidden',
    minHeight: 30,
    maxHeight: 125,
    justifyContent: 'flex-start',
  },
  picker: {
    width: '100%',
    color: colors.text,
    marginTop: -70,
  },
});
