import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { Picker as RNPicker } from "@react-native-picker/picker";

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

export function Picker({ label, value, onValueChange, items, error }: PickerProps) {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>{label}</Text>
      <View style={[styles.pickerWrapper, error && styles.pickerError]}>
        <RNPicker
          selectedValue={value}
          onValueChange={onValueChange}
          style={styles.picker}
        >
          <RNPicker.Item label="Select..." value="" />
          {items.map((item) => (
            <RNPicker.Item key={item.value} label={item.label} value={item.value} />
          ))}
        </RNPicker>
      </View>
      {error && <Text style={styles.errorText}>{error}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  label: {
    fontSize: 14,
    fontWeight: "600",
    color: "#374151",
    marginBottom: 8,
  },
  pickerWrapper: {
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: "#e5e7eb",
    borderRadius: 8,
    overflow: "hidden",
  },
  pickerError: {
    borderColor: "#ef4444",
  },
  picker: {
    height: 50,
  },
  errorText: {
    fontSize: 12,
    color: "#ef4444",
    marginTop: 4,
  },
});