import React, { memo } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import { colors, radius, spacing, typography } from '../../../theme';

type ProfileFieldProps = {
  label: string;
  value: string;
  onChange?: (value: string) => void;
  editable?: boolean;
};

const ProfileField = ({
  label,
  value,
  onChange,
  editable = true,
}: ProfileFieldProps) => {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>{label}</Text>
      <TextInput
        value={value}
        editable={editable}
        onChangeText={onChange}
        placeholder={label}
        placeholderTextColor={colors.textMuted}
        style={[styles.input, !editable && styles.disabledInput]}
      />
    </View>
  );
};

export default memo(ProfileField);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginBottom: spacing.md,
  },
  label: {
    fontSize: typography.fontSize.xs,
    color: colors.textSecondary,
    marginBottom: spacing.xs,
  },
  input: {
    borderWidth: 1,
    borderColor: colors.gray200,
    backgroundColor: colors.white,
    borderRadius: radius.md,
    height: 44,
    paddingHorizontal: spacing.md,
    fontSize: typography.fontSize.sm,
    color: colors.textPrimary,
  },
  disabledInput: {
    backgroundColor: colors.gray100,
    color: colors.textMuted,
  },
});