<View>
  <Label style={styles.label} nativeID="passwordLabel" accessibilityRole="text">
    Password
  </Label>
  <View className="relative">
    <Input
      placeholder="Enter your password"
      secureTextEntry={!showPassword}
      accessibilityLabel="Password input"
      accessibilityHint="Enter your password"
      accessibilityLabelledBy="passwordLabel"
      style={[styles.input, { marginTop: 4 }]}
      accessibilityRequired={true}
      accessibilityState={{
        disabled: false,
        required: true,
      }}
      autoComplete="password"
    />
    <TouchableOpacity
      onPress={togglePasswordVisibility}
      className="absolute -translate-y-1/2 right-3 top-1/2"
      accessibilityRole="button"
      accessibilityLabel={showPassword ? "Hide password" : "Show password"}
      accessibilityHint="Double tap to toggle password visibility"
      accessibilityState={{
        checked: showPassword,
      }}
    >
      {showPassword ? (
        <Eye size={20} color="#000000" accessibilityElementsHidden={true} />
      ) : (
        <EyeOff size={20} color="#000000" accessibilityElementsHidden={true} />
      )}
    </TouchableOpacity>
  </View>
</View>;