/*
 * 라벨 + 텍스트 입력 필드 — radius 4, 높이 48(터치 타깃).
 */
import React from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  type KeyboardTypeOptions,
  type TextInputProps,
} from 'react-native';
import { colors, radius, touch, type } from '../theme';

interface Props {
  label?: string;
  value: string;
  onChangeText: (v: string) => void;
  placeholder?: string;
  secureTextEntry?: boolean;
  keyboardType?: KeyboardTypeOptions;
  autoCapitalize?: TextInputProps['autoCapitalize'];
  helperText?: string;
  errorText?: string;
  editable?: boolean;
}

export function Field({
  label,
  value,
  onChangeText,
  placeholder,
  secureTextEntry,
  keyboardType,
  autoCapitalize = 'none',
  helperText,
  errorText,
  editable = true,
}: Props) {
  return (
    <View style={styles.wrap}>
      {label ? <Text style={styles.label}>{label}</Text> : null}
      <TextInput
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        placeholderTextColor={colors.neutral500}
        secureTextEntry={secureTextEntry}
        keyboardType={keyboardType}
        autoCapitalize={autoCapitalize}
        editable={editable}
        style={[
          styles.input,
          !!errorText && { borderColor: colors.error },
          !editable && { backgroundColor: colors.neutral050 },
        ]}
      />
      {errorText ? (
        <Text style={styles.error}>{errorText}</Text>
      ) : helperText ? (
        <Text style={styles.helper}>{helperText}</Text>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: { gap: 6 },
  label: { fontSize: type.body.fontSize, fontWeight: '600', color: colors.neutral700 },
  input: {
    minHeight: touch.min,
    borderWidth: 1,
    borderColor: colors.neutral200,
    borderRadius: radius.sm,
    paddingHorizontal: 12,
    fontSize: type.body.fontSize,
    color: colors.neutral900,
    backgroundColor: colors.white,
  },
  helper: { fontSize: type.caption.fontSize, color: colors.neutral500 },
  error: { fontSize: type.caption.fontSize, color: colors.error },
});