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

type PasswordFieldProps = {
  label: string;
  value: string;
  onChange: (value: string) => void;
  visible: boolean;
  toggle: () => void;
};

const PasswordField = ({
  label,
  value,
  onChange,
  visible,
  toggle,
}: PasswordFieldProps) => {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>{label}</Text>

      <View style={styles.row}>
        <TextInput
          style={styles.input}
          secureTextEntry={!visible}
          value={value}
          onChangeText={onChange}
          placeholder={label}
          placeholderTextColor={colors.textMuted}
        />

        <TouchableOpacity onPress={toggle} style={styles.eyeBtn}>
          <Icon name={visible ? 'eye-off' : 'eye'} size={18} color={colors.textSecondary} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default memo(PasswordField);

const styles = StyleSheet.create({
  container: {
    marginBottom: spacing.md,
  },
  label: {
    fontSize: typography.fontSize.xs,
    color: colors.textSecondary,
    marginBottom: spacing.xs,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    borderColor: colors.gray200,
    borderWidth: 1,
    borderRadius: radius.md,
    backgroundColor: colors.white,
  },
  input: {
    flex: 1,
    height: 44,
    paddingHorizontal: spacing.md,
    fontSize: typography.fontSize.sm,
    color: colors.textPrimary,
  },
  eyeBtn: {
    padding: spacing.sm,
  },
});